CORS Issue: Jquery ajax Upload file to monday.com

I am trying to upload a file from a custom form and there are no issues updating other fields except for adding a file. Here are the codes below. Can anybody tell me, what’s wrong with this.

Error: Access to XMLHttpRequest at ‘https://api.monday.com/v2/file’ from origin ‘null’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

    var url = "https://api.monday.com/v2/file";
    var boundary = "------WebKitFormBoundary7MA4YWxkTrZu0gW--";
    var data = "";
    var payload = "";
	
    // File Reader
    var fileReader = new FileReader();
    fileReader.onloadend = function (e) {
      data += boundary + "\r\n";
      data += "Content-Disposition: form-data; name=\"query\"; \r\n";
      data += "Content-Type:application/pdf\r\n\r\n";
      data += "\r\n" + query + "\r\n";

      // construct file part
      data += boundary + "\r\n";
      data += "Content-Disposition: form-data; name=\"variables[file]\"; filename=\"" + fileName + "\"\r\n";
      data += "Content-Type:application/octet-stream\r\n\r\n";		  
      data += e.target.result + "\r\n";
      data += ("\r\n" + boundary + "\r\n");
    }
    fileReader.readAsBinaryString(fileUpload);

    $.ajax({
      url: url,
      method: "POST",
      body: data,
      headers: {
        "Content-Type": "multipart/form-data; boundary=" + boundary,
        "Authorization": myToken
      }
    }).done(function (res) {
         console.log(res);
    }).fail(function (res) {
      console.log(res);
    });

Hi @rickyparamio, welcome to the community!

Yes indeed, this is an issue that some of our devs have run into. It might help to check out this thread: CORS issue when uploading file with API v2 - #7 by pepperaddict

There is another thread linked within as well, and that should also help.

I will keep this in the “Feature Requests” area until we get an update about this from our team.

-Helen

1 Like

Hey @rickyparamio !

Unfortunately, I think the endpoint is blocked by cors if you’re accessing it from the front-end from an outside source. It would work if it was a published build.

Also, have you tried the new SDK for file upload?? I’m going to try and implement it today so I can’t say for sure how it goes. Here’s the link to learn more about it just in case you didn’t know about it:

Good luck!

Hi pepperaddict,

Thanks for the recommendation but I got the same both when debugging and also in publish mode. You can take a look at the screenshot below.

I’m using simple ajax call but no go.