Tigris how to fetch images and use browser caching?

[hgoona]

I’m new to image retrieval from blob storage and only recently started using Tigris db.

I’m creating a SvelteKit app and what I’ve done so far is:

1. generate a presignedUrl of an img Key
2. to retrieve the URL
3. that I use as the src in an img tag.

is this the right way to do it?

The root of my question is how to set cache headers so that I can reduce unnecessary image fetching from TigrisDB? What I’m finding is that because the image is retrieved using a generated presignedUrl each time, each time I reload the page, the url is unique and therefore this is preventing the browser from using a cached version of the same image/using the cache headers (I think ??)

What’s the best way to do this? Should I be using a different method instead of generating presignedUrls? How to go about this?

@ovaistariq - This is a sort of extension from the previous thread - would appreciate your know-how!

[khuezy]

I don’t believe you can directly set the presigned URL in the src prop since it has a max expire of 14 days. You have to proxy the request via an endpoint and respond with a temporary redirect of the presigned URL. There’s a cache control field you need to set in the presigned call.

As for the IMG element, you need to add an onerror callback to re generate the URL in the case where the cache is expired.

[jmj]

There are multiple things you can do here.

If the images you want to serve are publicly accessible via your web interface, then you can create a bucket that is public-read (Tigris Dashboard → Bucket → Settings → Public / Private access). Additionally, you can also keep the directory listing disabled in case if you don’t want user to browse through your images in bucket.

If you don’t want all the objects in your bucket publicly accessible. You can mix public and private objects in your bucket Tigris now supports Object level access control - #3

In both of the above case, You can set the object level cache metadata and Tigris will honor it in response headers.

If you want the images to be accessible behind auth. You can leverage pre-signed URL with cache control parameters.

For pre-signed URL, yes the URL will be different everytime you sign - your backend can sign the request and serve to your frontend users and ensure to reuse within for example 60 days. Pre-signed URL can have response-cache-control param in it at the URL scope

const generatePresignedUrl = async () => {
  const bucketName = 'your-bucket-name';
  const objectKey = 'path/to/your/object.jpg';  // The object you're generating the URL for

  const params = {
    Bucket: bucketName,
    Key: objectKey,
    Expires: 3600,  // URL will expire in 1 hour (adjust as necessary)
    ResponseCacheControl: 'public, max-age=86400',  // Cache for 1 day (Override cache control during fetch)
  };

  try {
    // Generate the pre-signed URL
    const url = await s3.getSignedUrlPromise('getObject', params);
    console.log('Pre-signed URL:', url);
    return url;
  } catch (error) {
    console.error('Error generating pre-signed URL:', error);
  }
};

Or you can set it with the put-object that will be at the object scope and all the get-objects will honor it.

[hgoona]

I want my file privates, but does that mean i should use something else instead of presignedUrls to give the user authorization to access the object (and cache it per the same url)??

[khuezy]

Both our replies should give you enough to implement your use case