Can anybody help me how to upload multiple image files like in loop to a supabase storage bucket. Thank you.
Hello,
Unfortunately the multiple file upload to supabase in Wized isn’t natively supported yet. However you can use a combination of the supabase client from wized to upload multiple files.
First you need to get the client from Wized, this is possible through the Wized.requests.getClient() method. Here is its documentation: https://docs.wized.com/javascript-api/#wized-requests-getclient
It might look something like below:
const supabase = await Wized.requests.getClient('Supabase App');
After this, you can then use the supabase docs to upload your files. The relevant documentation is here: https://supabase.com/docs/reference/javascript/storage-from-upload
While using it - you’ll need to fetch the input first and then loop it through. It might look something like:
const myFilesInput = document.querySelector('.my-file-input');
for (file of myFIlesInputs.files){ const {data, error} = await supabase.client.storage.from('mybucketname').upload('myfilename.png', file
}`
Hey, I tried doing with “Run Function” , but seems like Its not working. Am I doing it right?
Wized read-only link: Wized
Path: /article
I think it’s because the attribute isn’t a form and you want to run the logic on submit
Could you change it to be on the form and retry
Yes, that is what I was sharing - on the preview link I checked, the submit element event is tied to an attribute named: gallery_images_test and not test_images_upload so the function is not tied to the correct element.
I see it is fixed now and does run on submit one more error I’ve seen on the snippet is that you are accessing the .files attribute like so:
... const files = i.gallery_images_test.files || [];
Wized already handles that under the hood, so you only need to access it like this:
... const files = i.gallery_images_test || [];
1 Like
ahhh!, got it now, yes its working now, thank you thank you.
1 Like