Unable to upload file but can create folder and list content
Answered
Hi,
I have a small react web app form which i'm trying to upload file into Box using a custom app.
I am using developer token, white listed the domain http://localhost:3000 in CORS domains.
But I'm still unable to upload the file due to CORS error. However I can create and list the contents of a folder without any error.
Do I need to enable Upload functionality explicitly anywhere on the console?
Here is the code snippet which is doing this. I'm using Axios to post requests
sendRequest(file) {
const attributes = {
"name": "test.png",
"parent": {
"id": "0"
}
};
const formData = new FormData();
formData.append('file', file)
formData.append('attributes', attributes)
const instance = axios.create({
headers: {
'Authorization': 'Bearer REMOVED'
}
});
let uploadUrl = 'https://upload.box.com/api/2.0/files/content';
instance.post(uploadUrl, formData).then((res) => {
console.log(res);
});
instance.get('https://api.box.com/2.0/folders/8***phone number removed for privacy***').then((res) => {
console.log(res);
})
instance.post('https://api.box.com/2.0/folders', { "name": "NewFolder4", "parent": { "id": "0" } }).then((res) => {
console.log(res);
})
}
-
This is the error I see on Chrome developer console.
Access to XMLHttpRequest at 'https://upload.box.com/api/2.0/files/content' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
-
Once http://localhost:3000 was added to the CORS whitelist was the application re-authorized in the admin console for the change to take effect? If so, can you confirm if this issue persists in multiple browsers?
If you'd like, please open a support ticket at support.box.com so we can take a closer look with you.
Best,
Kourtney
Box Technical Support Engineer
-
Yes, I have re-authorised the app after white listing domain. I've tried in Microsoft Edge as well and I'm getting the same error -
SEC7120: [CORS] The origin 'http://localhost:3000' did not find 'http://localhost:3000' in the Access-Control-Allow-Origin response header for cross-origin resource at 'https://upload.box.com/api/2.0/files/content'.
-
I managed to resolve it. It was a minor mistake of sending attributes as json objects rather than string.
Changing this
const attributes = { "name": "test.png", "parent": { "id": "0" } };to this
const attributes = JSON.stringify({ "name": "test.png", "parent": { "id": "0" } });resolved the issue.
One odd thing is the error response form box doesn't contain Access-Control-Allow-Origin headers which was causing Chrome to spit CORS error and not the actual error body. Even the network tab on the dev console doesn't show the response body.
Then i gave a try in Firefox and surprisingly it showed me what exactly happening and I could resolve it.
I think there is must be at least one example made available in the Box documentation to show how to upload a file without using box-ui-element library and just by plain HTML, JS & box token
Please sign in to leave a comment.
Comments
7 comments