Uploading files using methods
In this article, we'll explore ways of uploading files in UI Bakery using the following methods:
Uploading files via the HTTP Action and Form Data method
Add the File picker component to the working area.
Create a new HTTP Request action:
Set the target URL to the server where you want to upload the file
Set the request method to POST
In the Body, select Form Data, add a new key (the parameter name is typically file), and set the parameter type to file
Here, also specify the file by referencing the File picker component:
{{ui.filepicker.value}}
In your component, select the file you want to upload, and execute the action.

Uploading files via the HTTP Action and Binary method
Before you proceed to the instruction below, ensure your server is configured to accept the binary format for file uploads.
Add the File picker component to the working area.
Create a new HTTP Request action:
Set the target URL to the server where you want to upload the file
Set the request method to POST
In the Body, select Binary, and provide the object in the following format:
{ data: File | Blob | any, filename?: string }
For example, our object will look like this:{ data: {{ui.filepicker.value}}, filename: 'custom_name.txt' }
In your component, select the file you want to upload, and execute the action.

Uploading using a Blob object with binary content
Alternatively, you can create a Blob object with binary content without using File components, and then send it to the server.
To achieve this, follow the steps below:
Create a new action:
For the first step, add the JavaScript Code action step and specify the following code:
const content = 'Hello, world!'; const mimeType = 'text/plain'; return new Blob([content], { type: mimeType });
For the second step, add the HTTP Request action step (POST, Body - Binary) to reference the result of the previous step:
{ date: {{data}}, filename: 'hello_world.txt' }

Uploading files via the Fetch method
Add the File picker component to the working area.
Create a JavaScript Code action and specify the following code:
const file = {{ui.fileInput.value[0]}};
const formData = new FormData();
formData.append('upload', file);
fetch('url', { method: "POST", body: formData })
where 'url'
needs to be replaced with your target URL.
Assign the Code action to the On Change trigger of the File picker component.

Select the file you want to upload in the File picker.
The action will be executed once you select a file and it will be uploaded to the target URL. Alternatively, you can also use a Button component in this example and assign your action to the button's On Click trigger.
Last updated
Was this helpful?