FXDiamond

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.

I have found the issue. The reason why there wasn't an attachment, it's because I wrote:

comment: {
         body:this.state.selectedFile,
         upload: [`${res.data.upload.token}`]

instead of:

comment: {
         body:this.state.selectedFile,
         uploads: [`${res.data.upload.token}`]

A missing 's' on upload screwed me over. An error message would had been nice thou'.

 

 

 

 

 

Hi Greg,

I've cleaned the code up a little bit, added a script to convert the file to base64 and all of the sudden I don't have the CORS issue anymore, BUT, there is no attachment when the Request is displayed on the Zendesk dashboard.

It seems I am missing a step to attach the file to the Request. I thought a simple comment: { body: '', upload: [token]} was enough, but apparently I am wrong. Am I missing something?

Question about the comment: {upload: [token]}. Is this token the one generated by the Upload API for each uploaded file, or it's the token from the Zendesk Dashboard console?

I re-post here my code:

axios.post(`https://.zendesk.com/api/v2/uploads?filename=${this.state.selectedFileName}`,
this.state.convertedToBase64,
{
  headers: {
    accept:'application/json',
    'Content-Type':'application/binary',
  },
  <---- AM I MISSING SOMETHING HERE??? --->
})
.then(res => {
    axios.post("https://.zendesk.com/api/v2/requests.json", {
    headers: {
      accept:"application/json",
      "Content-Type":"application/json",
    },
    request: {
       requester: {
          name:this.state.fields.name,
       },
       subject:this.state.fields.job + " Position",
       recipient:"help@.com",
       group_id:,
       comment: {
         body:this.state.selectedFile,
         upload: [`${res.data.upload.token}`]
         
       },
      } ...... not important ...
});

Hi Greg,

Sorry, I didn't realised that the example had a jpg.

Re: Base 64 - No, I'm not converting the file to base64. I've always handled dataform, never binary, I didn't realised I had to convert it myself first. Is this the reason why there is no attachment in the ZendDesk?

Re CORS - The API calls I make are those added at the beginning of this thread. The api call for the Upload first, then the Request. For my understand on the CORS error, it happens with the Request. Here is the response

1. headers:
     cache-control: "max-age=0, private, must-revalidate"
     content-length: "1023"
     content-type: "application/json; charset=UTF-8"

2. config:
    adapters: ....
    data: ....
    headers:
      Accept: "application/json"
      Content-Type: "application/json" 
    maxBodyLength: -1
    maxContentLength: -1    
    method: "post"
    timeout: 0  
    transformRequest: [ƒ]
    transformResponse: [ƒ]
    url: "https://.zendesk.com/api/v2/uploads?filename=Test Doc CV.pdf" 
    validateStatus: ƒ validateStatus(status)
    xsrfCookieName: "XSRF-TOKEN"
    xsrfHeaderName: "X-XSRF-TOKEN" 

Also have Data and Request, but I don't think you need those. 

@...

Thanks for answering.

1. No, I am not using ZAF. Just a React SPA (Single Page App) with axios to handle a custom web for with a select to upload PDF, DOCX files. No images.
2. No, I'm not uploading an image. This select is for Cover Letter or CVs, and the format will be pdf and/or docx
3. CORS Error: Access to XMLHttpRequest at 'https://.zendesk.com/api/v2/requests.json' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

Hi,

I've tested the CURL snippet written below and it all works well, but I have an issue when I try to translate that in jsx code for react/axios api calls.

curl "https://.zendesk.com/api/v2/uploads.json?filename=test-image.png" \ -v -u /token: \ -H "Content-Type: application/binary" \ --data-binary @test-image.png -X POST

How should the above code be written to send an uploaded file to the zendesk dashboard?

With the code written below, I get a CORS issue. I've tried to add 'Allow origin * .... ' to the Headers, but no luck.

Do I need to use the username/token in the upload object to avoid CORS or it's not necessary? Also, I've tried with Postman and when I check the ticket in the ZendDesk dashboard, there is no attachment. Am I missing something?

 

axios.post(`https://.zendesk.com/api/v2/uploads?filename=${this.state.selectedFileName}`,
this.state.selectedFile
{
  headers: {
    accept:'application/json',
    'Content-Type':'application/binary',
  },
})
.then(res => {
    axios.post("https://.zendesk.com/api/v2/requests.json", {
    headers: {
      accept:"application/json",
      "Content-Type":"application/json",
    },
    request: {
       requester: {
          name:this.state.fields.name,
       },
       subject:this.state.fields.job + " Position",
       recipient:"help@.com",
       group_id:,
       comment: {
         body:this.state.selectedFile,
         upload: [`${res.data.upload.token}`]
       },
      } ...... not important ...
});