Uploading attachment using JavaScript

Hi james,

Can you try this?

Replace Content-Type

'Content-Type': 'image/png',

with

'Content-Type': 'application/binary',

Hope this helps!!

-sushant

Hello Sushant, 

Thank you for your response but this still does not work. The image after uploading is still corrupt and can not be viewed.

Do you have a working example?

I haven't tried with Axios yet. but I have used attachment API in python scripts and it works as expected. you can give try with the postman client and check if that works for you and then you can troubleshoot the issue whether Axios is causing this or any other factors.

-sushant

Hi @James Smyth

I'm using React with axios myself and I had the same issue which is now being resolved with the following:

First, the Content-Type must be binary, as Sushant suggested, only for the Upload API call. The Request API it will be the usual application/json:

'Content-Type': 'application/binary',

Second, I don't think you've converted your uploaded file to base64. You must convert before attaching it to your axios body. This way it won't break.  

I have found this code snippet which works like a charm: https://codesandbox.io/s/convert-file-to-base64-in-react-lqi1e

It's written for React, but you should be able to extract a JS version of it.

The solution that worked for me is:

1. Converting the image/video/file to a buffer first

2. Uploading the buffer as application/binary

The code is a bit big, but not hard to understand:

user selects file -> handleFileSelectAndUpload -> readFileAsBuffer -> handleImageUpload

const readFileAsBuffer = (file) => {
  const reader = newFileReader();
  reader.onload = (event) => {
    const buffer = event.target.result;
    handleImageUpload(file.name, buffer);
  };
  reader.readAsArrayBuffer(file);
};

const handleImageUpload = (name, buffer) => {
  fetch(
    `https://<your_domain>.zendesk.com/api/v2/uploads.json?filename=${name}`,
    { method: "POST", body: buffer, headers: { ["Content-Type"]: "application/binary" } }
  )
  .then(response => {
    if(response.ok) console.log("Success uploading image!")
    else console.log("Failed during image upload")
  })
};

const handleFileSelectAndUpload = (event) => {
  event.preventDefault();
  // This is for multiple files, but if you only need one
  // use readFileAsBuffer(event.target.files[0]) instead
  event.target.files.forEach(file => readFileAsBuffer(file));
}

// REACT
<input type="file" onChange={handleFileSelectAndUpload} />

// JAVASCRIPT / TYPESCRIPT
<input type="file" onchange={handleFileSelectAndUpload} />