10 Replies
I'm actuallly using SvelteKit + Supabase as well and the integration is seamless. Were you interested in only how-to related to integration, or more in general like where to host the images as well?
Oh, just the code-flow of
posting a form with an image to an endpoint and then, like, how to send the image to a bucket and returning the S3 url and saving it in Supabase. The docs Gary sent are great (thank you @garyaustin), but seem to not include the FormData file upload. At least, reading through quickly, I didn't see it.
@urth But agreed, I love S+S. Just, the last mile is often the longest.
@garyaustin Downloaded the Supabase repo ... The code examples are SO HELPFUL! Got avatar update & upload working... One question regarding image uploads, any tips on when/where to downsample high-res photos in order to save on storage and network egress?Answering my own question, I ended up solving image resampling with https://github.com/ericnograles/browser-image-resizer
GitHub
GitHub - ericnograles/browser-image-resizer: A tiny browser-based l...
A tiny browser-based library to downscale and/or resize images using canvas - GitHub - ericnograles/browser-image-resizer: A tiny browser-based library to downscale and/or resize images using canvas
You just need to convert the output
blob to a file, e.g., https://stackoverflow.com/questions/27159179/how-to-convert-blob-to-file-in-javascriptStack Overflow
How to convert Blob to File in JavaScript
I need to upload an image to NodeJS server to some directory. I am using connect-busboy node module for that.
I had the dataURL of the image that I converted to blob using the following code:
Supabase has nothing in that regard yet. I actually have in the past used the canvas in javascript to compress user images before upload. There is a project underway though here https://github.com/supabase/imgproxy that I'm hoping does that. SB has mentioned the ability at some point in the future.
GitHub
GitHub - supabase/imgproxy: Fast and secure standalone server for r...
Fast and secure standalone server for resizing and converting remote images - GitHub - supabase/imgproxy: Fast and secure standalone server for resizing and converting remote images
One thing I noticed though is that if you update avatar picture, you should check for old url/image and delete it, or it gets zombied.
Hi @garyaustin Yes, saw that discussion, so far unresolved. But the workaround—in-browser resampling—is pretty simple and I think will do the trick in my case.
I'm not sure what you mean on your update leaving old images around.
Previously uploaded avatar images remain in storage. I'm using the repo example: https://github.com/supabase/supabase/tree/master/examples/user-management/sveltekit-user-management
GitHub
supabase/examples/user-management/sveltekit-user-management at mast...
The open source Firebase alternative. Follow to stay updated about our public Beta. - supabase/examples/user-management/sveltekit-user-management at master · supabase/supabase
I don't know much about the guide code. Normally if you upload with the same file name you will get an error. There is a storage .update call that can replace the same named file. As far as dealing with the correct way to limit to one file per user you would have to devise that in your client code. Either delete the old user image, or just naming the file based on the user id and replacing it. Note that if you replace/update a file, because of caching the file image may not change until the cache time set when the file was uploaded expires. There are cache busting methods that can get around that in admin screens (which the dashboard UI uses).