How to attach an image with a ticket with JSON (and php)?

  • 10 September 2013
  • 5 replies
  • 517 views

  • Apprentice
  • 2 replies

hi,


I would like to be able to have our costumers attach an image to a costum form that creates tickets in freshdesk.


I haven't been able to find much information on the subject, but this is what i found: https://support.freshdesk.com/support/discussions/topics/17744


I'll compress and encode the image in my end, and that works great, but i'm having some trouble when making the json object and sending it to freshdesk. This is how i imagine it should look like (and what i've tested):


{

"helpdesk_ticket":{

"subject":"Product issue",

"description":"description",

"requester_name":"Name",

"email":"ab@aiaiai.dk",

"source":1,

"ticket_type":"Product Issues",

"custom_field":{

all my costum fields

},

"attachments":{

"type":"file",

"name":"product-and-reciept.jpg",

"content-type":"application/octet-stream",

"resource":"data:image/.jpg;base64,//BASE64//"

}

}

}


Everything works great without the "attachments" object.


//BASE64// is my base 64 string, which works fine on it's own.


This, however, gives me a "we're sorry something went wrong" error..


Does anyone know what i'm doing wrong?


Thanks in advance,


Andy


This topic has been closed for comments

5 replies

I've talked to support, and they've informed me that attachments is only supported trough xml.


UPDATE: support just got back to me again and told me it's possible - still without a solution. will update if/when i get one

 Did you ever get a working solution for this?

Unfortunately not my ideal solution, but it works!


My ideal solution would be:

-> Make JSON object in js with ticket info

-> send image to a php file (via ajax and form data) that will compress it, and return a base64 string

-> add base64 string to JSON object

-> send object to php file via ajax

-> add ticket with curl


This is how i had to do:

-> add all form inputs to a formData object, including the chosen image, and send these to a php file.

-> the php file will:

- make variables of all the POST fields from the formData

- compress/resize image and UPLOAD it (this is what i initially wanted to avoid)

- make a php array with all the data (much like i would make the JSON object in js) including the image path

- add this ticket to fresh desk

- unlink (delete) image.


If that makes sense to you, here is some pseudo code (NOT tested and rather quickly written, so be aware of mistakes):


js:

<script>
function submitForm(){

// Create formdata
var formdata = false;

if(window.FormData) formdata = new FormData();
if(formdata === false) {
alert("Your browser does not support form data");
return false;
}

//get fields (i would strongly advice validating them before sending them to php)
var first_name = $("#form_first_name").val();
var last_name = $("#form_last_name").val();
var image = document.getElementById('form_image');

//add vars to formdata object
formdata.append("first_name", first_name);
formdata.append("last_name", last_name);
formdata.append("image", image.files[0]);

//send stuff with ajax
$.ajax({
type: "POST",
url: "add_ticket.php",
data: formdata,
processData: false, //IMPORTANT when sending formdata
contentType: false, //IMPORTANT when sending formdata
beforeSend: function(){
console.log("adding ticket...");
},
success: function(data){
if(data == "error"){
console.log("Error adding ticket (freshdesk API)...");
} else {
console.log("ticket added! Ticket number is "+data);
}
},
error: function(){
console.log("error adding ticket (add_ticket.php)...");
}
});
}

</script>


php:


<?php

$first_name = $_POST['first_name'];
$last_name = $_POST['last_name'];

$image_filename = $_FILES['image']['name'];
$image_tmp_name = $_FILES['image']['tmp_name']; //the path to the temp image

// it would strongly advise to also validate the input here

/*

Upload and perhaps do simething witht the image (resize, compress, etc)

i'll call the new image path $new_image_filename

*/

$data = array(
'helpdesk_ticket[subject]' => 'A ticket',
'helpdesk_ticket[description]' => $_POST['description'], //these fields you'd probably want to also add
'helpdesk_ticket[email]' => $_POST['contact_email'],//these fields you'd probably want to also add
'helpdesk_ticket[source]' => 1,
'helpdesk_ticket[ticket_type]' => "Product issues",

// i use custom fields for everything - if there is a normal name field, you can totally use that
'helpdesk_ticket[custom_field][first_name_58605]' => $first_name,
'helpdesk_ticket[custom_field][last_name_58605]' => $last_name,

// abd finally we add attach the image!!
'helpdesk_ticket[attachments][][resource]' => "@" . $new_image_filename
);


//connect to freshdesk api and add ticket
$connection = curl_init();
curl_setopt($connection, CURLOPT_RETURNTRANSFER, true);
curl_setopt($connection, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($connection, CURLOPT_HEADER, false);
curl_setopt($connection, CURLOPT_USERPWD, "your@email.com:yourpass"); // <-- remember to change these

curl_setopt($connection, CURLOPT_POST, 1);
curl_setopt($connection, CURLOPT_POSTFIELDS, $data);
curl_setopt($connection, CURLOPT_VERBOSE, 1);

curl_setopt($connection, CURLOPT_URL, "http://freshdesk_username.freshdesk.com/helpdesk/tickets.json"); // <-- remember to change this
$response = curl_exec($connection);

// !IMPORTANT
// remember to delete the file if you dont want it taking up space
unlink($new_image_filename);

$data_decoded = json_decode($response); // if you want to see what freshdesk responded (good for debugging) and return the ticket number

$ticket_num = $data_decoded->helpdesk_ticket->display_id;

if(isset($ticket_num)){
echo $ticket_num;
} else {
echo "error";
}

// EDIT! a word of advice:
// Return the ticket id to the customer - they will know that the ticket has 100% been created, and you can return them an error if something went wrong (aka. you didnt get a ticket id from freshdesk) and they can try again

?>

I hope you, and maybe others, can make use of this :)

If someone has found a way to do this as i initially wanted (with JSON only and base64) i'd love to see it!

Andy


EDIT: did some edits in the code

EDIT2: just some more edits for clarity

EDIT3: just some more code edits

EDIT4: added a little word of advice to the php code :)

excelente, it has served me well 

this I need to manipulate a custom field


Hi Guys,


You could use the sample PHP code in the below URL to create a ticket with an attachment.


https://github.com/freshdesk/fresh-samples/blob/master/php_samples/create_ticket_with_attachment.php


It should help.