I'm having a problem with the Image Input component in a mobile app. This didn't work in the previous Retool release. I could select an image, but the component showed only a gray rectangle. In the new release, 3.17.0, the image appears in the app, with a valid BLOB URL. But it does not persist: It disappears if the page is refreshed, and the BLOB URL has broken. In addition, the label and placeholder, which appear in the development simulator, do not appear in the app when run on a mobile device.
I checked in file storage. The images are there, but the component has lost its link to the file. The state variables which identify the image in the file storage are empty after a page refresh in the editor.
Has anyone successfully used this component? Does anyone else have the same result as I have?
I believe the Image Input isn't intended to persist its value with a refresh—you would select an image and then immediately run a query to upload it to somewhere more permanent if you need (e.g. an S3 bucket).
For your second issue, I'm able to see both the Label and Placeholder on my mobile device. Are you on Android or iOS?
Any screenshots you have would be helpful! Thank you
Here are screenshots.
I create a default app and add an image input.
In the image input inspector, I check the option "Upload file to Retool Storage".
Take a picture.
In Retool Storage I find my picture.
The state of the image input shows the name and the BLOB URL at my Retool subdomain.
At this point, I find everything as expected. The image file is stored at Retool, no need for external host. Presumably that's the whole point of Retool Storage.
Now I refresh the page. The image is gone from the app. As for the state of the image input, all the properties that link my image to its place in Retool Storage have been erased.
However, the file still shows up in Retool Storage. It hasn't been deleted. Only the link to the file has been deleted.
What is Retool Storage for if not for storing files at Retool? And what is the image input "Upload file to Retool Storage" option for if not to store image files at Retool?
We unfortunately don't support URLs to objects in Retool Storage yet. That URI you're seeing in the inspector is the blob URL used for storing the file locally, on the client, so that it can be uploaded. It is simply an in-memory representation of the image file.
+1 to bca's response.
The upload component state is transient, so refreshing will erase state. We've found it useful to persist fileId references somewhere else (eg RetoolDb) in order to store any necessary metadata with fileId. The fileId can then be used to view in an image viewer component etc.