Uploading Multiple Files to Xano: Solved

[kyanaloe]

I have been trying to upload files directly to Xano. I have been able to do this with individual image files and PDFs successfully, using the tutorial directions.

I have NOT been able to send:

1. Microsoft Office files, like .doc, .docx, .ppt, .pptx

• This happens even when I select the “Word File” extension from the dropdown list for the upload element
• The error I receive when I try this:

"code: “ERROR_CODE_INPUT_ERROR”
message: “Missing param: type”

2. Multiple Files at once. I tried using the iterator, but I can’t figure out what array I can tell it to parse. The files in the File Uploader are listed within an {object}

I attempted a For Loop in the custom JS action step, but that doesn’t work either.

[Joyce]

@kyanaloe

I have been trying to upload files directly to Xano. I have been able to do this with individual image files and PDFs successfully, using the tutorial directions.

Hi @kyanaloe, can you clarify what you’re trying to do?

If you’re having trouble using WeWeb’s no-code file upload Action in the Workflows or are you struggling with custom JS to send files directly to Xano without going through WeWeb’s CDN?

[kyanaloe]

Yes, thank you. I am trying to upload directly to my backend (Xano) without storing in WeWeb’s CDN, because my app needs to be HIPAA compliant.

[kyanaloe]

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!

[kyanaloe]

Figured it out!

For anyone else trying to do the same:

1. Create an array out of the object values from your uploader
   

2. Iterate over the array with the Iterator action
   

3. Use the JS sample from the File Upload tutorial, but replace the uploader value with the item from #2
   

   

4. Send to your backend with the API

[Joyce]

This is great! Thanks for sharing @kyanaloe

[Anna.fae]

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 ?

[kevinwasie]

@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.

[kevinwasie]

@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)
}

[Anna.fae]

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.

[kevinwasie]

@Anna.fae
It should look like this … I got rid of anything irrelevant to file upload.

[Anna.fae]

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

[kevinwasie]

@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:

[Anna.fae]

All works! absolute gigathanks!

[kevinwasie]

Awesome! Way to go!

[Joyce]

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!

[visualdevs]

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

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

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", …

[RCS]

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?

[dorilama]

formData is not an array, so of course formData[0] is undefined. You can read more about it here

[RCS]

I see, so how does @kevinwasie 's example above work then? It appears he appends formData like an array.