Storing images URL to Retool Storage

Hi,

I'm building an app where I can capture an image and store the URL under the selected item to be viewed from the item collection. So far, I can capture an image and store it as a URL in my database but it appears the URL is only local to the device I have captured it on. Is there a way to store it somewhere like the Retool Storage so that the image can be viewed and stored from any device?

Thanks

Yes you can store files on Retool storage, choose to make the file private or public if you want it to be behind Retool's auth or not, and then copy the URL from there. Let me know if you have more questions.

Right now, I have the image uploaded into the Retool storage as base64 but is there a way to grab the Retool Storage URL or file ID automatically instead of base64 data to store into my DB? I noticed that the preview image in the collection view only works when it is a URL but not base64.

Hi @taphlo, the only way this is possible is if you set up your own S3 resource and connect to it manually. This way, you have full control over every file as they would not be hosted on Retool. The trade off is that there might be expenses from the AWS service. On Retool, your storage is free up to 5GB. :slightly_smiling_face:

Hi Paulo, I figured out a work around where I upload an image with a specific name (containing ID of the item) and then retrieve the fileID by filtering for the name containing the ID from the metadata list. Once I have the fileID, I can combine with the first part of the URL (https://something.retool.com/api/file/) and store it in my DB under that item. It is a bit slow but it works.

Now that I have this working I am having another issue where when I upload an image to an item that already has an existing image, it is not overwriting or replacing the original image with that name even though I have the settings on as shown below.

image

Hi @taphlo, great workaround! Is the new issue happening on Retool Storage, your own resource, or both?

I believe it is related to the Retool Storage since it gets the right ID to properly name the file but when I try to upload it, there is no new image added to the Retool Storage.

Could you provide us a bit more context:

A) Is uploading a new file to Retool Storage working with your workaround?

B) When you say "... when I upload an image to an item that already has an existing image." How are you saving the images? The query from the screenshot you shared seems to be from a "Retool Storage" resource.

The files are sent directly to the storage, the storage looks like:

Enabling "Overwrite existing file with same name" will make it so the file in "Retool Storage" is replaced if a new one with the same name is uploaded to the same location (root in this case), but they are not connected to other "items".

Perhaps you have another query that runs after this one where the "fileID" is saved as a property for an object that you are storing in your own db. That file will not be replaced automatically, the settings on this query do not extend to other queries we run, and the replacement happens only in "Retool Storage".

C) How does the "item" you are saving the image for looks like, and what type of db are we using?

I believe the issue is only with the Retool storage since I dont see a new upload to the storage when trying to replace an existing image. When looking at the retool storage under "image_84.jpg" for example, it uploads a new file properly with the specific name when it is the first time an image is uploaded but when I try to upload a new image to replace it, "image_84.jpg" for example, will still be the first image uploaded.

Current Process:

  1. Upload image using imageInput
  2. (JS Code) Convert imageInput into Base64
  3. (Data Resource Query) Take the Base64 and upload to Retool Storage using a name based on the selected Item

I stopped running the steps afterwards to try to isolate the problem but I am still unsure what the issue is. The process afterwards just searches the retool storage for the image with the specified name and then my DB is used just to store the URL after everyting is uploaded properly.

Thanks

Hi @taphlo, I was able to reproduce this. The query does overwrite the file with the same name, but it takes a while for those changes to reflect on Retool Storage because your browser has the previous image cached, the browser doesn't know the url now points to a new image.

We can verify this in a couple of different ways:

Open the storage page (yourorg.retool.com/files) on a new browser, you'll see the changes there immediately (on the same browser it takes about 5 minutes).

Alternatively, we can make a query with Retool Storage as a Resource, and the Action type of "Get contents of a file". Add the name of the file to "File input" and run it. We should see the new image in the response.

Here is an example for that query:

Note: that's Cosmo replacing the image I uploaded beforehand.

With this in mind, your end users should see the updated images on your apps when the queries to get them run. The changes are just not updated on the UI for Retool Storage.

I did create a bug report for this in case there is something our engineers can do to give the Retool Storage page an option to fetch a file manually, instead of letting the browser reference the cache. I'll keep you posted with any updates on this. :slightly_smiling_face:

Hi, I tried retrieving the file and opening another browser but it still appears to not be overwriting the previous file. I also tried doing it on the mobile app and reloading and I still see no changes.

Here are the exact steps I used:

  1. Convert image to base (called ProcessImage2)
    image
    I noticed the base64 that is outputted differs from the original base64 that is stored so it should be converting properly

  2. Store base64 data into Retool Storage under the specified name
    image

The output is still showing the original image, base64, fileID (not sure if fileID should differ) but something did update since it says "updated At: current date"
image

  1. Retrieve content of specified file
    image

Once again, I am seeing the original image and base64

Let me know if I am missing something or doing something wrong. Please keep me updated if it is a bug and thanks for the help so far!

Interesting. Here is a video with my current set up where the overwrite is working. The only difference is that I did not make the file public and I show a notification on success, but that should not make a difference. When following these steps, do you still get the same image?

---> link to video <---

Also, because we are running the query we built, check that "Upload file to Retool Storage" on the image input is not enabled:

Everything appears to be the same from my steps and I am still getting the same results. I also turned on the success notification and it is saying success so something did upload.

The only solution I have right now is that I added a delete image action to delete before a new upload and then a new image appears.

That is odd. Let's try a couple of things:


First, try removing the {{ }} and "" for "File name" on the "Upload file" query. Set it to Image_84.jpg instead of {{"Image_84.jpg"}} and see if it makes a difference.

Then, remove the query that is adding the fileID to your own db and let's find out if this Retool Storage query works in isolation. :face_with_monocle:

Hi Paulo, I remade every query with the only difference being the file public option turned off and it appears to work now. I am not sure if it is the issue or I corrected something along the way but thank you for the help to get it working!

Hi @taphlo, you are welcome! :slightly_smiling_face:
I'm happy to hear it is working now.