File Upload

File upload elements

In WeWeb, you can work with two file upload element:

• one where the user browses through their folders to select a file, and
• one where the user can drag-and-drop their files on the page

You will find both in the Add menu if you look for "file" or upload" in the global search bar:

TIP

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

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.

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

TIP

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

Upload to backend

We are currently working on adding no-code actions to help you upload files to the backend of your choice without going through WeWeb's CDN.

For now, you'll need a little bit of JavaScript (see video and code snippet below):

In the custom code below, you will need to update the fileObject variable in your own custom code to match what you have in your WeWeb project.

const fileObject = variables[/* File 1 - value */ 'b6336bd9-ada3-4f31-b704-48051cdafb48-value'] // Update this with your variable
function fileToBase64(file, callback) {
    const reader = new FileReader();

    reader.onload = function () {
        const base64String = reader.result.split(',')[1]; // Extract the base64 data from the result
        callback(base64String);
    };

    reader.readAsDataURL(file);
}

return new Promise((resolve) => {
    fileToBase64(fileObject, function (base64String) {
    console.log(`data:${fileObject?.['type']};base64,${base64String}`)
          resolve(`data:${fileObject?.['type']};base64,${base64String}`);
    });
})

WARNING

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"]
}