Upload file using /files/content using REST calls

Hi Everyone,

I am trying to upload a file using the box API - https://upload.box.com/api/2.0/files/content, however every time I am receiving the below mentioned error:

“XMLHttpRequest cannot load https://upload.box.com/api/2.0/files/content. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 400.”

I have also enabled CORS for my http://localhost:4200 in the box configuration, it is angular project from which I am trying to upload files. Creating folder using folder api is successfull.

Here is my code:

let form = new FormData();

// The content of the file
let fileBody = 'This is a test file';

let formDataContent: FormData = new FormData();

let fileBlob: Blob = new Blob([fileBody], { type: 'text/xml' });

let attributes = {

"name": "xyz.txt",

"parent": {"id": "0"}

};

formDataContent.append('attributes', JSON.stringify(attributes));

formDataContent.append('file', fileBlob, "xyz.txt");

let uploadUrl = 'https://upload.box.com/api/2.0/files/content';

// The Box OAuth 2 Header. Add your access token.
var headers = {
Authorization: 'Bearer mydevToken',

'Content-Type': 'multipart/form-data'

};

let result = post(uploadUrl, formDataContent, headers);

Thanks in Advance!

Chris Dascalos

May 02, 2022 11:48

Hey Dindayal Pandey,

I am not an Angular developer by any means, but I will give it a shot.

Whenever I struggle with using the API I will always make sure to use Postman first and confirm that someone other than me can make the call successfully before writing my code. Can you confirm this works for you in Postman or another API client?

Inside of your code, it looks like you might be missing a ":" in the Authorization header. Could it be as simple as having that missing which is why it cannot parse the token from the string?

Once again, I am not an Angular developer by any means so take this with a grain of salt, but I would suggest using a local file in your application to upload before using something that you are creating in memory. A file structure is much more complicated than a "blob" of data and the string "text" is drastically different than a Word file for example with the single string of "text". Working with variables that we know to be successful can help limit where things are not working.

Let us know what you find out after changing the implementation around a bit. I might also suggest a linter on your code since I am not qualified to look for any other potential syntax issues.

Hopefully this helps!

Comments