I built a profile picture CRUD system and ran into a caching issue with Supabase Storage.
When uploading an image, you need to define a path in the storage bucket. The problem is: if you reuse the same path every time, the new image will be uploaded successfully, but due to caching, the old image will still be displayed. The browser continues to serve the cached version, and only after clearing the cache does the new image appear.
To solve this, every time I update the image, I first delete the existing file and then upload the new one. However, this only works reliably if I also change the file path each time. To ensure a unique path, I append a timestamp using new Date().getTime().
Using Supabase’s “replace storage file” workflow doesn’t solve this issue, since the file path remains the same and the cache continues to serve the old image.
I can’t remember if there’s anymore to what I done but I’ve just done a normal upload with the correct path and file so it’ll overwrite then I retrieve the URL and i store it in a variable with a ?v= concatenated on. I can’t remember the specifics or if this is all you need but I mananged to get around your issue and I think it’s just doing this below. You use this value to get the image.
I realized that this method doesn’t work if you update the image of the same record more than once in a short period of time, less than a minute for example. Even using cache control with the value 0.
Another observation is that the way your formula is written, it will concatenate a new parameter into your URL whenever the image is updated, instead of replacing the current parameter.
When requesting the image, just append a timestamp with the last update of that image to the url. So [PROJECT_ID].supabase.com/…/your_bucket/img?cache=[TIMESTAMP_HERE], this will invalidate the cache.
