Sending a file in a multipart/form-data

Queries and Resources
1

Hello.

I'm trying to figure out how to simply send a file to my API endpoint using the Body Form Data with a key of file and type of File with the value of {{ fileInput1.files[0] }}. The object contains the following data:

{"name":"myFile.xlsx","size":14675,"lastModified":1683222753637,"type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}

My API is expecting this file and will perform actions on the file and return a csv file (that I'm sure will be the next challenge in Retool but baby steps first :slight_smile: )

As I understand it the browser should be handling this as a multipart/form-data and using this file to include in the HTTP request. Granted I'm new to this but I constructed all of this in Postman and it worked just fine. Now all I'm trying to do is simply get a quick interface up so a user can upload a file using the fileInput1 component and submit the request to get a file back. My API is expecting a xlsx file. I see that I can send Base64 but this will require a re-write of my code to accept and this is supposed to be an easier way :slight_smile:

I've searched the forums but I can't find a particular use case simlar to mine. All of them seem to use Base64 binary and I do not want to do this for the reasons above.

Can anyone provide guidance on this? Is this not a feature in retool and the binary is a workaround?

Thanks in advance!

2

Hey @turn10garage! Happy to help with this.

Would you mind sharing a screenshot of what you currently have in Retool and what's currently working for you in Postman (as much detail here would be great, e.g. specific headers you're passing along)? Theoretically, anything that works in Postman should also work in Retool :slight_smile:

3

Hi @victoria you're the best :slight_smile:

The component I'm using is fileinput. Very simple and I didn't adjust any of the parameters.

image
image3694×1744 186 KB

Super simple (which is probably why it isn't working :wink:

Here is my postman:

Authorization is using AWS Signature:

image
image1710×790 56.5 KB

Headers:

image
image1958×644 57.7 KB

and finally, Body:

image
image1764×436 27 KB

Obviously, the issue appears to be getting the file "uploaded" as I've done in Postman and I believe I've also done with the {{fileInput.files[0]}}...

My code on the other end of the API is expecting an xlsx file to analyze and then return a csv file to the browser as a download.

Also, this is my resource. I can confirm it is reaching the program via the API because I have an error message when a file is not attached and it will return that through Retool so I know it's reaching it and the resource is properly working.

image
image1250×1826 132 KB

Hope this all helps!!

1 Like
4

@victoria Any luck? :slight_smile:

5

Hey @turn10garage - It should send as a binary file in the form if you pass along an object with the name and data properties set!

image
image1460×236 19.7 KB

1 Like
6

Thanks Justin! I'll give that a try! I took my application down for now but once I get it back up and running again I'll try it. This looks like the missing link though!

7

No problem! That usually works with most form data POST endpoints, though it's not super clear. We just corrected the help text over File to try to make that more obvious :grinning: