Mobile app fileInput uploading file to external API

Community Show & Tell
1

I spent an silly amount of time trying to figure out how to upload a file from a mobile app to an API.

The API I was using supported two different upload methods. I can either provide a URL or I could upload the file as if it was a standard file upload via a HTML web form.

I thought I'd try retool storage first, however it quickly became evident that the files uploaded to retool storage could not be accessed via the public internet with a URL.

So I decided to switch to the standard web form option.

There were a few forum posts that seemed to point me in the right direction, however I think the problem is the object returned with the fileInput on mobile apps is in a different format to the other file type objects on the standard web apps.

In the end I figured it out. When posting a standard webform I had to use the following as the source of my file:-

{{ {"name":fileInput1.file.name, "data":fileInput1.value.split("base64,")[1] }}}

Things that are important:-

  1. Watch for spacing on the brackets. Make sure you have a space "{{ {" good "{{{" bad.
  2. You need to extract the base64 data from the fileInput.

I think this needs documenting better, or just making easier.

So the query looked like this:-

image
image1128×557 30.3 KB

I hope this helps someone going forward and saving the couple of hours it took me to figure out.

3 Likes
2

Registered just to say thank you, James!

Spent a couple of weeks searching the forum, official documentation and testing various combinations that have "worked" for others...

Retool team: would like to suggest that you collect all these different use cases related to file uploading and update the official documentation.

2 Likes
3

+1 from me as well—thank you for posting this, James.

And Andrey, absolutely! I shared this feedback with the docs team and they wrote this recently:

As for docs on the Mobile specific File Input component, we're working on it! :eyes: