Bulk encode images/files for upload to Xano

[Himanshu]

Does anyone know how we can take multiple files from a file uploader - encode them - and upload them to Xano?

The method shared on the YouTube channel worked fine for us when we had a single file. For multiple files, it doesn’t work.

1. Loop through each item.
   
   
2. Encode each item.
   
   

This method works till here. No error. But if I try to save the encoded files to an array variable, it doesn’t save.

[Joyce]

Hi @Himanshu

Can you give us more information about your use case?

1. are you using the “file upload input” or the “drag and drop files” element?

2. in your screenshot, you have a “Change variable value” inside the loop that seems to update an array. Are you saying this array is not updated properly?

3. in your Xano database, will each file warrant creating a separate record in a table (e.g. a job application with one resume attachment) or will you be updating a field with an array of files? (e.g. a real estate listing with multiple images)

[Himanshu]

@Joyce, I’m using the drag-and-drop element. Here is the setup - Himanshu’s video 🤓 — Tella

All the files will be stored in a single record as an array.

The encode action doesn’t throw an error but returns an empty value.

[Joyce]

Got it!

Here’s what my workflow looks like:

Reset component var

I’m taking the variable that comes with the “Drag and drop files” element, and making sure it’s empty at the start of the workflow:

Loop

I loop through the array of files dropped by the user:

Encode file

I encode the file related to the current item in the loop:

Note that the item might be empty if you didn’t test the workflow before. I’d recommend uploading a couple of files in preview mode and testing the workflow before creating this step so it’s easier to visualize things when doing your bindings.

Create file in Xano library

I take the result from the encoding action to add the file in the Xano library:

Again, it’s helpful to test action after action so you can more easily bind to the result of a previous action.

List of encoded files

I update the list of encoded files with the data of the result from the previous action:

Add record in Xano table

Finally, outside the loop, I make an API call to create a record in my Xano table:

In the example above, I didn’t bother binding all my other fields but “in real life” I would of course

Does that help?

[Himanshu]

I swear this was the same setup in the morning, which magically is working perfectly now!

Thanks @Joyce