Uploading Multiple Files to Xano: Solved

Ask us anything How do I?
1

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”

  1. 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.
for loop attempt multi files

2

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?

3

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.

1 Like
4

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!

5

Figured it out!

For anyone else trying to do the same:

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

  2. Iterate over the array with the Iterator action
    Iterate over array

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

    Upload JS with item from loop
    Upload JS with item from loop561×735 50.9 KB

  4. Send to your backend with the API

3 Likes
6

This is great! Thanks for sharing @kyanaloe :raised_hands:

1 Like
7

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 ?

Screenshot 2022-07-21 at 14.08.43
Screenshot 2022-07-21 at 14.08.431920×1033 73.9 KB

8

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

9

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

Screen Shot 2022-07-21 at 9.25.42 AM
Screen Shot 2022-07-21 at 9.25.42 AM762×319 37.6 KB 

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
10

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.

Screenshot 2022-07-21 at 17.26.55
Screenshot 2022-07-21 at 17.26.551920×669 53 KB

11

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

Screen Shot 2022-07-21 at 11.30.10 AM
Screen Shot 2022-07-21 at 11.30.10 AM907×971 36.2 KB

Screen Shot 2022-07-21 at 11.33.52 AM
Screen Shot 2022-07-21 at 11.33.52 AM1624×1107 93 KB

12

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

13

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

Screen Shot 2022-07-21 at 12.04.11 PM
Screen Shot 2022-07-21 at 12.04.11 PM938×986 61.1 KB

1 Like
14

All works! :partying_face: absolute gigathanks! :star_struck:

15

Awesome! Way to go!

1 Like
16

Wow! You all are blowing my mind!

Thanks so much for helping each other out :hugs:

I’m learning a lot from your questions and answers!

17

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