CORS issue with Upload / Request API and no file attached

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://<removed>.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://<removed>.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@<removed>.com",
       group_id:<removed>,
       comment: {
         body:this.state.selectedFile,
         upload: [`${res.data.upload.token}`]
         <!-- AM I MISSING SOMETHING HERE?? -->
       },
      } ...... 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://<removed>.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. 

Ok, got it...in the example I saw a jpg reference. Regardless, are you converting these files to base64? Since you're using application/binary for the upload, it will be expecting a binary format. 

Regarding the CORS error, that response is indicative that the header was not present on the request. Could you share the code that you used, along with the response when the header was present?

Greg - Community Manager

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://<removed>.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 there! I have a few questions/comments to get us started here:

• Are you making these calls through ZAF or is this a custom ticket form on a web page? I'm assuming it's the latter, but I want to be because if it is ZAF, axios is not the best option. I'll include this article if you are using ZAF.
• Since you are uploading an image and passing in binary/.dat, you will first want to convert the image to base64. I'll include this blog post that you can use to convert that if you don't already have an example method to use.
• Could you share the specific CORS error that you're getting both with and without the header present?