Unable to upload file but can create folder and list content

回答済み

新規投稿

visheg

2019年08月29日 02:22

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

7件のコメント

cbetta

2019年08月29日 04:45
Hmm, that is odd as that indeed should work. Could you share the exact error?
0

コメントアクションパーマリンク
visheg

2019年08月29日 05:51
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.
0

コメントアクションパーマリンク
Kourtney

2019年08月29日 12:53
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

2019年08月30日 04:02
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'.
0

コメントアクションパーマリンク
cbetta

2019年09月02日 02:45
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

2019年09月02日 04:59
Thanks, I've opened a support ticket now.
0

コメントアクションパーマリンク
visheg

2019年09月06日 03:27
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

コメントアクションパーマリンク

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