Attachment uploads
AnsweredI am trying to implement a support request email in our app. I can upload attachments and send requests via cURL. Both work fine from the command line. And I have the app working to upload attachments and create requests that attach the uploads. However, although the attachments are formatted correctly when submitted via cURL, they are NOT when I submit them using the app. I tried using both a Dropzone and a simple form to grab the attachments. I also tried sending the file object and converting the file to base64 -- neither worked. Here is how I'm structuring the request:
-
Welcome to the Community, Meredith! Thanks for your patience on this. :)
We're working on finding someone to help you with this. Stand by!
-
Hi Meredith-
Just to ensure we're on the same page, are you working with a Zendesk ZAF V2 app? If so, uploading attachments via an app can definitely be a bit tricky. As a result, I have spun up a super simple sample app that demonstrates one method to accomplish this. Here's the example code from the iframe.html. Feel free to give this a try but please know it is provided to demonstrate functionality and is not something we can assist with or troubleshoot issue being custom code.<html>
<head>
<meta charset="utf-8">
<!-- http://garden.zendesk.com -->
<link rel="stylesheet" href="https://assets.zendesk.com/apps/sdk-assets/css/0/zendesk_garden.css" type="text/css">
</head>
<body>
<h2>File Upload Test</h2>
</br>
<label for="data">Select file:</label>
<input type="file" name="data[]" id="data" multiple>
<button type="button" onclick="doit()">Upload file now...</button>
</br></br>
<label>Token value:</label>
<input type="text" id='token_value_from_upload' style="width: 220px;">
</br></br>
<button type="button" onclick="doattach()">Attach file to ticket...</button>
<script type="text/javascript" src="https://assets.zendesk.com/apps/sdk/2.0/zaf_sdk.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
// Initialise the Zendesk JavaScript API client
// https://developer.zendesk.com/apps/docs/apps-v2
var client = ZAFClient.init();
client.invoke('resize', { width: '100%', height: '100%' });
// upload selected file
function doit() {
//retrieve the uploaded file
var file = data.files[0];
$.ajax({
url: "https://YOUR_SUBDOMAIN.zendesk.com/api/v2/uploads.json?filename=" + file.name,
type: 'POST',
data: file,
dataType: 'json',
processData: false,
contentType: 'application/binary',
headers: {
"Authorization": "Bearer OAUTH_TOKEN"
},
success: function(response) {
console.log(response);
document.getElementById('token_value_from_upload').value = response.upload.token;
}
});
}
// attach uploaded file to ticket
function doattach() {
var ticket_update = '{"ticket": {"comment": { "body": "New comment here", "uploads": ["'
+ document.getElementById('token_value_from_upload').value + '"] }}}'
client.get('ticket.id').then(function(response_for_id){
var options = {
url: "/api/v2/tickets/" + response_for_id["ticket.id"].toString(),
type: 'PUT',
data: ticket_update,
dataType: 'json',
processData: false,
contentType: 'application/json'
}
client.request(options).then(
function(response_to_update_ticket) {
console.log("Successful ticket update response here:", response_to_update_ticket);
},
function(error_updating_ticket){
console.log("Error ticket update response here:", error_updating_ticket);
})
})
}
</script>
</body>
</html> -
See the Attaching files to tickets via API KB article for a slightly updated version of the above code sample.
Also, for folks who might come across this, consider posting in the Zendesk Apps framework (ZAF) developer support community forum instead.
Post is closed for comments.
3 Comments