What's the best way tu opload a file directly to Supabase storage?

[dorilama]

remember that you have loops in workflows and you can mix and match them with javascript actions.
If it works for a single file use the code in a js action inside a loop in the workflow

[tylerboodman]

@visualdevs This thread ended awkwardly I think… Was there some final Javascript code you needed up using to handle multiple files nicely?

The Supabase documention mentions not going over 6MB for the standard upload method

Storage Uploads | Supabase Docs

There’s some Resumable upload feature for larger files, which one does your method use? (Seems the simple upload method)

@dorilama

@Joyce Is there anything on the roadmap to add Supabase Storage natively in the plugin? To upload and retrieve/download files. Thanks!

[dorilama]

Welcome to the community

to handle multiple files you need a loop, which you can create in the workflow. In the loop you can use the code to make the direct upload.
You can do it all in one javascript action but you need to handle correctly the async loop. If you go with the gpt path you can use the new copilot feature, ask Joyce how to get access.
Supabase announced the new resumable upload for large files yesterday, it’s in beta and not everybody has access to it right now.

[Joyce]

@tylerboodman

Is there anything on the roadmap to add Supabase Storage natively in the plugin? To upload and retrieve/download files.

Yes! It’s on our radar, currently under review but not yet prioritized

[pyee]

Blockquote
remember that you have loops in workflows and you can mix and match them with javascript actions.
If it works for a single file use the code in a js action inside a loop in the workflow

Thanks for this reminder. I really like how the JS stays very compartmentalized and the workflow loops make it more visual as to what’s happening.

[D-EFFCON]

Question. If a bad agent has a user account, wouldn’t they be able to see their authentication token as this is a front-end call, and just spam the user’s supabase storage?

[justifi]

See Network Restrictions

[D-EFFCON]

It doesn’t work for HTTPS requests to Storage, if you see the Limitations section at the bottom of the article. But definitely a good idea for general requests to the db

[jaredgibb]

Any updates on this?? Currently using google storage and supabase everything else.

[Joyce]

Yesssss. File storage plugins, including Supabase storage, are still under review (so can’t provide an ETA) but they are gaining ground in the roadmap

[raydeck]

Why not use a call to generate a signed upload URL for supabase? You make an authenticated call to get the URL, then use this URL for the upload. Supabase Javascript Client - Create signed upload URL

[tillyboard]

Do you can show how to code that request? Because only with the following code it’s not possible to get the signed URL from Supabase. Would be great, if you can show the workflow.

[tillyboard]

so important! Are there any updates, when you have some good news for us?

[dorilama]

wwLib.wwPlugins.supabaseAuth.publicInstance should have your supabase instance, so you can try await wwLib.wwPlugins.supabaseAuth.publicInstance.storage.from(...) (see here)

[tillyboard]

thx a lot for your replay! @dorilama

im struggling with this message now… What i’am doing wrong?

[dorilama]

the error is very clear: await can be used only in async functions

async function run(){
 await yourLogic()
}

Because the url is not created in a sync way you don’t want to do this in the code for the image source.
It’s better that you do this in a workflow with a javascript action. In weweb javascript actions are wrapped inside async functions, so you can use the code directly. Add return data at the end so it’s available in the next action and assign the value to a weweb variable.

[tillyboard]

Hey @dorilama thx! The way to do this in a workflow worked very well! I got the presigned URL with expire token etc. You will see the rest in the screenshots (For other ones who need some inspirations )

My next question is how to get this code running without a workflow? I have a collection and every “row” should do this request of an unique image/signedURL. Can you show me how to do this? I searched a lot but got not helpful information

My Collection:

Code:

const { data, error } = await wwLib.wwPlugins.supabaseAuth.publicInstance
   .storage
  .from('images')
  .createSignedUrl('test_image.png', 60);
  
return data

Thank you very much!!

[dorilama]

you can use a for loop in the workflow and save the result in a object or an array.

[tillyboard]

Is that the common way to retrieve presigned urls from supabase storage? Because there are many posts here in the weweb community which struggle with uploading files to supabase. But nobody asked how to show the data/files

I could also do the buckets of supabase as public, but then everybody with that link can see the sensitive data.

[dorilama]

Well, from your experience it looks like the binding for the image src is a sync function. You need to retrieve the url with an async function, therefore you can’t use the code directly in the binding because a promise is not a string. The next step is using workflow + variable. When you try that and discover something specific that you don’t like then you can decide if it’s the case to invest time and effort to find a different solution.
You may want to start another topic about this, it will make easier to search for it in the future by other users.