Back

Cache Appwrite Bucket images in svelte store?

  • 0
  • Web
  • Storage
Chola
25 Jun, 2023, 10:35

I have a component that fetches an image from Appwrite Storage every time that it is mounted, I would like to have this image stored to a svelte-store cache similar to the one i use for auth state, but the URL object that's returned doesn't seem to have an id that i can reference to be able to retrieve this image from cache (if i somehow manage to create a cache for it that is). Any suggestions for an image caching solution? ---EDIT--- Just realized it's not exactly the right server for this question, but hoping i can still get some tips

TL;DR
The user wants to cache images from the Appwrite Storage in a Svelte store to avoid loading them every time the component is mounted. They are looking for suggestions on how to create a caching solution for the images.
Drake
25 Jun, 2023, 14:37

Each file has a file id so you can use the bucket id and file id for the cache keys 🧐

Chola
25 Jun, 2023, 15:43

This sdk.storage.getFilePreview(), or this /v1/storage/buckets/{bucketId}/files/{fileId}/preview. When i console logged what it returned i get this URL object bash hash: "" host: "" hostname: "" href: "" origin: "" password: "" pathname: "" port: "" protocol: "https:" search: "" searchParams: URLSearchParams(4) { width β†’ "256", gravity β†’ "center", quality β†’ "75", … } username: "" <prototype>: URLPrototype { toJSON: toJSON(), toString: toString(), href: Getter & Setter, … }

Chola
25 Jun, 2023, 15:44

I've removed the returned values ();

Drake
25 Jun, 2023, 15:45

Try console.log(result.toString())

Chola
25 Jun, 2023, 15:49

that returns the actual ref to the image. Here is what I'm calling to get the image by the way. const photoPreview = await sdk.storage.getFilePreview(bucketID, fileID, imageWidth) So the fileID is cached locally, but I'm trying to keep the returned image preview in the cache too, but how to retrieve it

Drake
25 Jun, 2023, 15:50

What do you mean?

You're passing in the file id...you have it

Chola
25 Jun, 2023, 15:51

yes i have the fileID, it's cached. I'm trying to avoid loading the image everytime the component is mounted, can't i download it once from appwrite then every consequent preview is done locally (from cache)?

Chola
25 Jun, 2023, 15:52

I'd have to implement my own caching system for this maybe?

Drake
25 Jun, 2023, 16:25

What platform are you building for?

Chola
25 Jun, 2023, 16:56

Sveltekit, web

Drake
25 Jun, 2023, 17:52

If the image is loaded client-side, the browser should cache it automatically

Reply

Reply to this thread by joining our Discord

Reply on Discord

Need support?

Join our Discord

Get community support by joining our Discord server.

Join Discord

Get premium support

Join Appwrite Pro and get email support from our team.

Learn more