WeWeb Documentation

Multiple file upload ​

You can allow users to upload multiple files to your WeWeb app by using the Drag and Drop files element:

Multiple file upload element

By default, it comes with a workflow that:

  • handles multiple file uploads,
  • via the WeWeb CDN.

If you want to use this element to upload a single file and/or upload the file(s) directly to an external backend without going through WeWeb's CDN, you will need to customize its default settings.

Upload to WeWeb's CDN ​

By default, the Drag and Drop files element comes with a no-code workflow that allows you to:

  • upload files to WeWeb's CDN,
  • update your backend with the URLs of the files uploaded to WeWeb's CDN.

All you need to do is drag-and-drop the element on the page and it will work out of the box.

If you wish to upload files directly to your backend (instead of storing URLs), read on.

Upload to external backend ​

To upload multiple files directly to an external backend using the Drag and Drop files element, you will need to change the workflow that comes with the element by default.

The updated workflow will look something like this:

Multiple file upload workflow

TIP

In the step-by-step guide below, we use Xano as an example but you can apply similar logic no matter what backend you are using as long as it accepts the Data URL or Base64 format.

Reset component var ​

We take the variable that comes with the “Drag and drop files” element, and make sure it’s empty at the start of the workflow:

Multiple file upload workflow

Loop through the files ​

We loop through the input variable of the Drag and drop file component, i.e. the list of files dropped by the user:

Loop through files uploaded

Encode each file ​

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

Encode the current item

TIP

The item might be empty if you didn’t test the workflow before. We 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 ​

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

Create file in Xano library

TIP

It’s helpful to test each action along the way because it makes it easier to bind to the result of a previous action.

List of encoded files ​

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

Update list of encoded files

Add record in Xano table ​

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

Create record in Xano

WARNING

Make sure the column where you are sending the attachments is a list in Xano:

Structure of attachment field in Xano

If you try sending multiple attachments to a single structure column, Xano will return an error.