Hi, I’m trying to upload a file from the file uploader component, directly to Supabase storage, without using Weweb storage. What would be the best way to achieve this? Thanks in advance.

This is the current url, I’m not sure and couldn’t find the proper URL in the Supabase documentation [Captura de Pantalla 2022-12-06 a la(s) 6.41.54 a.m.]

you are calling an url that has literally variables['......'] in it. You should use string concatenation o string literals or the weweb helper functions.

This is using the javascript function, with the URL written manually [Captura de Pantalla 2022-12-06 a la(s) 7.00.34 a.m.] Maybe I’m using the wrong URL, but I couldn’t find a proper URL path from the Supabase documentation.

You have a syntax error now. I suggest you write your code first in an editor with linting, it’s easier to get rid of this kind of error. And when you test actions that interact directly with the DOM it’s better to test them in preview mode and check the developer console for errors.

Done, solved the syntax problem, but now displays this error. [Captura de Pantalla 2022-12-06 a la(s) 11.42.22 a.m.]

[image] dorilama: And when you test actions that interact directly with the DOM it’s better to test them in preview mode and check the developer console for errors. [image] Cursor Position for New Rich Text Element How do I? are you testing in preview mode? the win…

Finally! I did it! My URL was wrong and I wasn’t using a correct filename format. [Captura de Pantalla 2022-12-07 a la(s) 8.48.28 a.m.] var formData = new FormData(); var fileSource = document.querySelector('#fileUploaderID input'); var fileName = "your file name"; formData.append("content", fil…

Also, this is the JS code to make it work for multiple files var formData = new FormData(); var formFiles = document.querySelector('#fileUploaderID input').files; var fileName = "name"; for (let i=0; i < formFiles.length; i++) { fileName = your File name path[i]valuename; formData.appe…

axios.post is an async function, remember to correctly handle that in the loop.

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

Ask us anything How do I?

dorilama (Mariano) December 6, 2022, 5:01pm 13

Topic		Replies	Views
Upload directly to Supabase Buckets How do I? supabase	3	294	January 26, 2024
New Video: Multiple File Upload in weweb & Supabase Show and Tell workflows , supabase	1	129	June 10, 2025
Sending Files from Supabase to OpenAI api How do I? supabase , openai	6	79	December 10, 2025
Supabase resumable uploads Ask us anything supabase	8	509	July 4, 2024
Supabase Storage Ask us anything	4	784	March 31, 2022

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

Related topics