Box Status

Unable to upload file but can create folder and list content

回答済み
フォローする
新規投稿
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

コメント

7件のコメント

日付 投票
  • cbetta

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

    0
    コメントアクション パーマリンク
  • 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
    コメントアクション パーマリンク
  • 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
    コメントアクション パーマリンク
  • 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
    コメントアクション パーマリンク
  • 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
    コメントアクション パーマリンク
  • visheg

       Thanks, I've opened a support ticket now. 

    0
    コメントアクション パーマリンク
  • 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
    コメントアクション パーマリンク

サインインしてコメントを残してください。