Starter Guide
Basics
On-premise
Tutorials
Uploading the files
To upload the files from UI Bakery to your database, there are two approaches:
Uploading the files via FETCH method
The first approach to upload the files into your database is by using the FETCH method.
- 1.Add an input component, and change its type to
file. - 2.Create the Code action, and specify the code as below:
1
const file = {{ui.fileInput.value[0]}};
2
const formData = new FormData();
3
formData.append('upload', file);
4
5
fetch('https://mycompany.com/api/upload-file', {method: "POST", body: formData});
Copied!
replace
'url' with the necessary URL.
3. Assign the action OnChange trigger of the input or add a button and assign the action on the button's click.
Uploading the files by sending a binary string
You can also send a file as a binary string instead of FormData.
- 1.Add an input component, and change its type to
file. - 2.Add a multi-step action. The first step should be a Code step with the below code:
1
const file = {{ui.fileInput.value[0]}};
2
return await new Promise(_res => {
3
const reader = new FileReader();
4
reader.onload = function(evt) {
5
_res(evt.target.result);
6
};
7
reader.readAsBinaryString(file);
8
});
Copied!
3. Add HTTP request as a second step of the action. Select POST method, add your base URL, and specify this code into the body of your request:
1
{
2
binaryFile: {{data}}
3
}
Copied!
Note! For this approach, the server should know how to process these types of request.
4. Assign the action OnChange trigger of the input or add a button and assign the action on the button's click.