⬆️ File Upload

In this article, we explain:

• how to upload a file with WeWeb's File Upload Element
• how to upload multiple files at once using WeWeb's File Upload Element
• how to upload a file directly to your backend with custom javascript
• how to ensure the form is submitted even if the user doesn't upload a file

WeWeb's File Upload Element

In WeWeb, you can add a file upload element to user forms:

In the example below, we want to let our users upload a resume when they apply to a job so we create a two-step workflow.

🔥 Pro Tip 🔥

You can choose to upload multiple files at once in the File Upload Element's specific settings.

Step 1 – we upload the user's file to WeWeb's CDN

The result, if you “Test action” in the workflow, is a URL.

If you copy this URL and paste it in a web browser, you’ll be able to see the image and where it is hosted.

Step 2 – we map the user inputs to our XANO database

In the case of the file upload, we bind the "resume" field in Xano to the URL value returned by the first action of our workflow.

Note that, because we are sending a URL to Xano, we need to make sure that the “resume” field type in Xano is a string.

💡PRO TIP💡 To view and use the result from a previous action in a workflow, make sure to "Test action" first.

Need to upload a file directly to your backend, bypassing WeWeb's CDN? 🤔

Here's how you can upload directly to Xano with a custom Javascript action in a WeWeb workflow:

In the custom code below, we:

• have given our file input the id template-image , and
• are sending the POST request to a Xano instance that starts with xq6v-k0uj

You will need to update these two values in your own custom code to match what you have in your WeWeb and Xano projects.

var formData = new FormData();
var imagefile = document.querySelector('#template-image input');

formData.append("content", imagefile.files[0]);
return await axios.post("https://xq6v-k0uj-1kii.n7.xano.io/api:8qBEuV9G/upload/image", formData,{
    headers:{
        "Content-Type": "multipart/form-data"
    }
})

🔥 Pro Tip 🔥

If your Xano endpoint is protected by authentication, you will beed to add the authentication headers in the custom code as well.

headers:{
    "Content-Type": "multipart/form-data",
    "Authorization": "Bearer " + pluginVariables["asdf"]["accessToken"]
}

Handling Forms with No Files Uploaded

By default, the File Upload element is a required field.

This means that you need an extra step if you want to allow users to submit a form without uploading a file.

For example, if you had users applying to jobs, you may want to make the upload of a resume optional.

Soon, you will be able to do this with branching in workflows.

Until we release this new feature, here's how you can do it: