Retool App to Box Upload File

[tspecht]

Hi all,

I am trying to test out connecting my retool web-based application to take an uploaded file and send it to my box drive via the upload PUSH. The below screenshots show my settings for setting up the API connection, and then the form information for the PUSH. However, when I run it I get a 400 code with a blank message (“”). When I look in the response, It also states a 415 error of invalid file type (see attached). The file is stored encoded with base64 (not sure if that is the problem since the documentation states a string or binary.

I am not sure if this is a box issue, retool issue, or user issue (or a combination).

[tspecht]

Edit: I can’t upload more screenshots due to being a new user.

[rbarbosa]

Hi @tspecht , welcome to the forum!

I lifted your new user limitations.

Can you elaborate a bit more?

Are you trying to upload from the browser directly to box?

Or is there a backend that can process the request from the browser and then upload to Box?

Tell us a bit more about what tech stacks are you using here.

Cheers

[tspecht]

Thank you, @rbarbosa.

I will say I am fairly new to APIs so please bare with me.

I could not find specifics in the Retool documentation for how they handle file processing. From my understanding, the file uploader used to store the data is temporarily stored in a local JS variable as an object. To my understanding there is not a backend process aside from the initial encoding.

As for stacks, most of the application is performed in JS, with some of the backend processes on Retools side (which I do not have access to) is node.js and JSON.

[tspecht]

Update:

I have seem to fixed all the authorization and file binary issues I was having. However, I am not getting a 400 error stating I have not supplied a parent id. However, as seen in the attachments, this is provided. I am not sure how else to showcase the parent.id attribute. The documentation does state that the parent is an object.

[rbarbosa]

Hi @tspecht

Great news!

So the parent id is easy to fix. From your screenshots I can tell you that it can not be 1 for sure.

The parent id represents the is of the folder in box that you want to upload the file to, and there is an easy way to identify that id.

From the box app, if you open the folder, for example my workshops folder:

The id is present on the url, in my case 234108232105

Uploading a file into this folder:

curl --location 'https://upload.box.com/api/2.0/files/content?fields=id%2Ctype%2Cname' \
--header 'Content-Type: multipart/form-data' \
--header 'Authorization: Bearer gO...HR' \
--form 'attributes="{
  \"name\": \"working-with-box-sign.png\",
  \"parent\": {
    \"id\": \"234108232105\"
  }
}"' \
--form 'file=@"/Users/rbarbosa/Downloads/working-with-box-sign.png"'

I’m not sure how you would configure that form data fields, but it looks like you have plenty of options.

As you can see above, the attributes expected by the Box API are in json format:

{
  "name": "working-with-box-sign.png",
  "parent": {
    "id": "234108232105"
  }
}

The last detail is that the attributes must be before the file, which looks correct in your screenshot.

Looks like you’re almost there, try some variations and if possible check what is really being sent in the request.

Let us know if this worked.

Cheers