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.
Checkout the tutorial below. It is made for skipping WeWeb and uploading straight to Xano. Concepts are the same for Supabase.
See section: * how to upload a file directly to your backend with custom javascript
2 Likes
This is super helpful Kevin, thanks a lot! I’ll check this doc.
I couldn’t make it work, apparently the Xano method does not work for Supabase, or maybe I’m doing something wrong 
Now I’m trying with the REST API but still can’t make it work
I’m using this blogpost as an example Upload Files To Supabase Storage using Retool
can you show how are you binding the url for the request?
If you get a 404 error it’s probably because the url is pointing to a resource that does not exist.
Also, I think you don’t want to send json with this request
The URL is “https://mysupabase.co/storage/v1/bucket/folder/filename”
What would be the right request?
You are clearly sending a request to an endpoint that does not exist and you are building the url dynamically, so probably the logic you have for building the url has some problem.
You should share a screenshot of the binding formula for the url to get more help.
Also you are sending json with an empty body, you may want to check again the tutorial that Kevin posted and supabase docs. You probably want to have a multipart/form-data as content type and create the formData that you need to send in the request. It may be better to use a javascript action with a modified version of the code in the tutorial that Kevin linked.
This is the current url, I’m not sure and couldn’t find the proper URL in the Supabase documentation
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
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.
1 Like
Finally! I did it! My URL was wrong and I wasn’t using a correct filename format.
var formData = new FormData();
var fileSource = document.querySelector('#fileUploaderID input');
var fileName = "your file name";
formData.append("content", fileSource.files[0]);
return await axios.post("https://yourURL.supabase.co/storage/v1/object/bucketName/folderName/"+fileName, formData,{
headers:{
"Content-Type": "multipart/form-data",
"Authorization": "Your authentication apikey"
}
})
3 Likes
Well done! 
1 Like
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.append('files[]', formFiles[i]);
axios.post("https://yourURL.supabase.co/storage/v1/object/bucketName/folderName/"+fileName, formData,{
headers:{
"Content-Type": "multipart/form-data",
"Authorization": "Your authentication token"
}
})
}
3 Likes
axios.post is an async function, remember to correctly handle that in the loop.
Could you help me with an example please?
There are a lot of ways. A basic example can be:
await Promise.all(
formFiles.map(async (file) => {
// do what you need to do
return await axios.post();
})
);
But then you may want to add error handling, knowing which file failed the upload, limiting the number of concurrent upload, or deciding to upload the files sequentially and many other things.
1 Like
I asked ChatGPT some help for this, do you think this is a good way to handle multiple files?
var formData = new FormData();
var formFiles = document.querySelector('#fileUploaderID input').files;
var fileName = "name";
async function uploadFiles() {
for (let i=0; i < formFiles.length; i++) {
fileName = your File name path[i]valuename;
formData.append('files[]', formFiles[i]);
try {
const response = await axios.post("https://yourURL.supabase.co/storage/v1/object/bucketName/folderName/"+fileName, formData,{
headers:{
"Content-Type": "multipart/form-data",
"Authorization": "Your authentication token"
}
})
console.log(response.data); // handle the response as per your requirement
} catch (error) {
console.error(error); // handle the error as per your requirement
}
}
}
uploadFiles();