How to Refresh URL Image Cache

App Building
1

I'm trying to update an image thats uploaded into S3.

The url for the image stays the same but, once uploaded the image url appears to be cached and the image does not update. I have tried refreshing it using javascript but, it still shows the same image as previous.

imageURL.setValue("");                 //image url is updated with empty string
await setCoverImage.trigger()          //new image is uploaded to the same path in S3
imageURL.setValue("https://S3URL/1");  //image url is set again to same path

Note the image is getting its url from a local variable.

2

Hi @lpearl, I was able to replicate this issue. Although the query to get the image with the specific file name does output the updated image, the Image component does not update for a while. As you pointed out, it seems to be an issue with the component caching the image source.

I created an internal report and we'll update you here with any news from our devs.

1 Like
3

As far as I can tell, what you're experiencing is not unique to Retool.

Likely, your image is being sent with Cache-Control headers. This means that for any given URL, the browser will reuse the response for a certain amount of time.

To get around that, you can use cache-busting techniques, e.g. adding the URL query so it's something like your-url/?add-a-counter-or-hash-here-123

2 Likes
4

Yes, I was aware it was a caching issue. I just hoped there was a way to reload the image component directly.

Adding onto your solution, this is what I came up with.

await setCoverImage.trigger()
await new Promise(resolve => setTimeout(resolve, 2500));
imageURL.setValue("URL/"+urlparams.projectID+"/1.webp?" + Date.now());

Works perfectly, I had to add the delay since its running a lambda function to process the image. Still better then reloading the page.

Thanks everyone!

2 Likes
5

Thanks for sharing your implementation! :hammer_and_pick: