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"
}
})
2 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"
}
})
}
2 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();
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
1 Like
@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
There’s some Resumable upload feature for larger files, which one does your method use? (Seems the simple upload method)
@Joyce Is there anything on the roadmap to add Supabase Storage natively in the plugin? To upload and retrieve/download files. Thanks! 
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.
1 Like
Yes! It’s on our radar, currently under review but not yet prioritized
3 Likes
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.
1 Like