Level up your Box knowledge with brand new learning paths on Box University. Visit training.box.com to get started

Box Status

Unable to upload file but can create folder and list content

Answered
Follow
New post
visheg

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);
    })
  }

 

 

 

 

 

 

0

Comments

7 comments

Date Votes
  • cbetta

    Hmm,  that is odd as that indeed should work. Could you share the exact error?

    0
    Comment actions Permalink
  • visheg

     

     

    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.

    Box.PNG

     

    0
    Comment actions Permalink
  • Kourtney

     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

    0
    Comment actions Permalink
  • visheg

     

    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'.

     

    Box2.PNG

    0
    Comment actions Permalink
  • cbetta

     that seems like an odd one. I'd recommend opening a support ticket as  suggested, and then they can have a look into the exact cause for you.

    0
    Comment actions Permalink
  • visheg

       Thanks, I've opened a support ticket now. 

    0
    Comment actions Permalink
  • visheg

    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 

    0
    Comment actions Permalink

Please sign in to leave a comment.