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: 
const file = {{ui.fileInput.value[0]}};
const formData = new FormData();
formData.append('upload', file);
​
fetch('https://mycompany.com/api/upload-file', {method: "POST", body: formData});
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:
const file = {{ui.fileInput.value[0]}};
return await new Promise(_res => {
  const reader = new FileReader();
  reader.onload = function(evt) {
    _res(evt.target.result);
  };
  reader.readAsBinaryString(file);
});
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:
{
   binaryFile: {{data}}
} 
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.

How Tos - Previous

CSV export

Next - How Tos

Display files from Google Drive and Dropbox

Last modified 3mo ago

Copy link

Outline

Uploading the files via FETCH method

Uploading the files by sending a binary string