Cache Appwrite Bucket images in svelte store?
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
Each file has a file id so you can use the bucket id and file id for the cache keys 🧐
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, … }
I've removed the returned values ();
Try console.log(result.toString())
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
What do you mean?
You're passing in the file id...you have it
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)?
I'd have to implement my own caching system for this maybe?
What platform are you building for?
Sveltekit, web
If the image is loaded client-side, the browser should cache it automatically
