Attachment uploads

Answered

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
    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.

Powered by Zendesk