Skip to main content

I’m calling the Box API directly from JavaScript to upload a new file. As the docs suggest, I run a preflight check first, and that check succeeds (200). The code for the preflight check looks like this:



const preflightResponse = await fetch(url, {

method: "OPTIONS",

headers: {

Authorization: `Bearer ${this.#token}`,

"Content-Type": "application/json",

},

body: JSON.stringify({

name,

parent: {

id: parentId,

},

}),

});



After that step succeeds, I move on to the next step of uploading the actual file. For this text, I’m just sending the text “Hello, world!” to a file named hello.txt. The parentId is the folder to upload to, and it exists (otherwise the preflight check would fail). The code to upload the file looks like this:



const form = new FormData();



form.append("attributes", JSON.stringify({

name,

parent: {

id: parentId,

},

}));

form.append("file", new Blob(e"Hello, world!"]));



const response = await fetch(url, {

method: "POST",

headers: {

Authorization: `Bearer ${this.#token}`

},

body: form,

});



For this call, I get a 404 error. The body of the response is blank, so there’s no additional information given about a possible problem.



Some other notes about this:





  • The url is https://api.box.com/2.0/files/content.


  • I am using a developer token and testing on the account that is tied to that developer token.


  • I was able to successfully create a folder using the API, and that’s the folder I’m trying to upload this file to.


  • If you’re unfamiliar with JavaScript, passing body: form automatically sets the correct Content-type header.


  • Other API calls also succeed without any problem using the same developer token.




At this point I’m out of ideas of what I could possibly be doing wrong, so any insights are gratefully appreciated.

Hi @nzakas , welcome to the forum!



This is odd, the 404 error would indicate that the parent folder does not exist or that the user associated with the developer token does not have access to it.



From your description, all of those should be ok.



Nevertheless can you include in your script a couple of fetch before trying to upload the file:





  • GET https://api.box.com/2.0/users/me - so we can check who is logged in


  • GET https://api.box.com/2.0/folders/:folder_id/items - to check if the user does have access to the folder




Let us know.



Best regards


Thanks for the tips. I did successfully execute both of those requests.





  • /users/me shows that I am the one making the request


  • /folder/:folder_id/items successfully returns the one file that is currently in that folder




I think that the preflight request would have failed if I didn’t have the correct permissions to perform the upload?


I totally understand @nzakas , the error makes no sense in the context you explained.



I was just trying to figure our if there is some other factor at play, and for that including those fetches in the middle of your script and debug the output, could give us some hits.



If in the middle of the script the /me returns the expected user, and the /folder_id/returns the items, then I kindly ask you to open a support ticket.



I was hoping something would be revealed.



Can you try to duplicate the use case using Postman?



Cheers


Yup, I get the same result in Postman. I’ll look into opening a ticket next week.


There has to be something on the folder permissions, or the app permissions.



Can you re-check those for the user associated with the developer token?



On the app can you check if it has the scope for write all files and folders?



Here is some info on application scopes.



Cheers


The app does have scope to write files and folders (I previously created a folder with the API just fine). I would think that if the wrong user was associated with the account that creating folders and the preflight check would also fail?



I also tried creating a new Box application from scratch, in case I was missing some setting I forgot I had toggled, but I’m still getting a 404 on upload.


I figured out what I was doing wrong. I didn’t notice that the domain for uploading files is actually upload.box.com rather than api.box.com. To make life easier, I’ve now switched my logic so that it uses the upload_url returned from the preflight check.



Thanks for the help and sorry for the wild goose chase.


No problem at all @nzakas , it had to be something and we are here to help!



Cheers


Reply