I actually think that the issue with microsoft files is on the Xano end of things, so you can disregard that comment.
I could definitely use help with the multiple file uploads, though!
Figured it out!
For anyone else trying to do the same:
-
Create an array out of the object values from your uploader
-
Iterate over the array with the Iterator action
-
Use the JS sample from the File Upload tutorial, but replace the uploader value with the item from #2
-
Send to your backend with the API
3 Likes
Hi @kyanaloe! I try to use your method but I cannot make Xano endopint to receive multiple images. Can you share how did you do that in Xano? I only can operate with single image upload endpoint.
Do you use loop here ?
@Anna.fae With that method, you are only sending one file at a time. So, you would need to change the input type back from a list to a single entity.
If you want to send all of the files at once, use the Javascript below to make one API call.
@kyanaloe I love the noCode loop. I didnt think to do that.
If someone finds this and wants the JS version to only make one API call and send the files all at once, here’s what I use:
try {
var formData = new FormData();
var formFiles = document.querySelector('#offer_documents input').files;
var response;
for (let i=0; i < formFiles.length; i++) {
formData.append('files[]', formFiles[i]);
}
return await axios.post('https://xano.io/api :... ccu/offer/upload_documents', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})}
catch (e) {
throw new Error("There was a problem with the uploads: " + e)
}
1 Like
Thanks! I ve used this code but backent returns 500. I assume because I have to change Xano side where we convert input to image file, I dont know how to make it for that Obj that this code sends to Xano…
in Xano i have to populate list of images, input is list but create image from File is wrong… no tutorial in Xano how to upload multiple images.
Oh yes thats what I need for creating an image, that works!
But also I try to figure out how to EDIT parameter of my record which is image list (on my screenshot above… not to add new record but rather add item to the array
@Anna.fae You are inserting a list of images into the record?
If so, use the array functions of Xano to add whatever you need to the variable, and then insert that variable into your editRecord item.
My field names are different, but something like this:
1 Like
All works! 
absolute gigathanks! 
Awesome! Way to go!
1 Like
Wow! You all are blowing my mind!
Thanks so much for helping each other out 
I’m learning a lot from your questions and answers!
What happen if I remove the “return await” from the code?
I just used your code as reference to upload multiple files to Supabase, but to make it work I had to remove “return await” but not sure if that’s something bad
Thank you for sharing! My set up for uploading multiple files at once is still not working. By printing to the console I can see that I grab the media files. The for loop iterates. But the line to append formData doesn’t append the media file. the formData object remains undefined.
does it have to do with the first param in append? what does the ‘files’ do?
I see, so how does @kevinwasie 's example above work then? It appears he appends formData like an array.
Kevin is not accessing it as if it was an array. You are trying to log data the wrong way.
Just go on and use it for the api request.
I should have clarified, the API call sends a null object. I figured it’s because of the formData variable I’m sending is undefined. No file ends up getting uploaded. So I tried troubleshooting from the console logs.
I solved it!
Thanks for pointing that out. I realized the first parameter in the append() is supposed to refer to the input parameter in xano. I had that wrongly referenced. In kevin’s example he uses files[ ]. Where as in the original weweb docs we use content. And since I uploaded multiple in an array, I should use content[ ]
2 Likes