Uploading attachment using JavaScript

Answered

March 17, 2021 12:45

I am trying to upload an attachment (dummy.png), the response is that the attachment has been created as I get a 201 response with a token.

I then attach the token to the uploads array before submitting a new ticket. The issue I am having is when I view the ticket, the attachment is corrupted. I am wondering whether it is how i am uploading the attachment in the first place.

This is my header below for uploading an attachment. Can someone let me know if there is an issue here?

Thank you.

const response = await axios.post(`uploads.json?filename=dummy.png`, body, {

baseURL: '/api/v2',

headers: {

common: {

Accept: 'application/json',

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

mode: 'no-cors',

Authorization: `Basic ${process.env.token}`,

},

},

withCredentials: true,

});

4 Comments

Sushant Awalekar
- March 17, 2021 17:23
Hi james,

Can you try this?

Replace Content-Type
```
'Content-Type': 'image/png',
```
with
```
'Content-Type': 'application/binary',
```
Hope this helps!!

-sushant
0
James Smyth
- April 05, 2021 12:43
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?

0
Sushant Awalekar
- April 05, 2021 16:36
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

0
FXDiamond
- April 07, 2021 11:12
Hi @...

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

Please sign in to leave a comment.

4 Comments

Didn't find what you were looking for?