English (US)

Attachment uploads

Answered
Meredith Nachman

I 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:

Sending the file from the html form's input field:
 
const submitCustomerServiceAttachment = (file) => {
  const headers = {
    'Content-Type': 'application/binary'
  }
  const options = {
    url,
    method: 'POST',
    headers: headers,
    body: file
  }
  request(options, callback)
}
 
Or, using base64 (when I put base64 code into a decoder, I clearly get my image back, so it's converting it correctly -- and I have tried both with and without the preliminary text before the comma that gets returned by .readAsDataURL()):
 
const submitCustomerServiceAttachment = (file) => {
  const reader = new FileReader()
  reader.readAsDataURL(file)
  const headers = {
    'Content-Type': 'application/binary'
  }
  reader.onloadend = function() {
    const fileInBinary = reader.result.split(',').slice(1).join();
    const options = {
      url,
      method: 'POST',
      headers: headers,
      body: fileInBinary
    }
    request(options, callback)
  }
}
 
I would appreciate any suggestions about how to format the data being sent or any other options to include!  Thank you!!!

3 Comments

  • Jessie Schutz
    Zendesk team member

    Welcome to the Community, Meredith! Thanks for your patience on this. :)

    We're working on finding someone to help you with this. Stand by!

    0
  • Becca
    Zendesk team member

    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>
    0
  • Bryan - Community Manager
    • Edited
    Zendesk Developer Support

    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.

    0

Post is closed for comments.

Didn't find what you were looking for?

New post
Powered by Zendesk