Unable to upload file but can create folder and list content

Answered
New post

Comments

7 comments

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