Uploading files using methods

In this article, we'll explore ways of uploading files in UI Bakery using the following methods:

• Form Data

• Binary

• Fetch

Uploading files via the HTTP Action and Form Data method

1. Add the File picker component to the working area.

2. Create a new HTTP Request action:

   1. Set the target URL to the server where you want to upload the file

   2. Set the request method to POST

   3. In the Body, select Form Data, add a new key (the parameter name is typically file), and set the parameter type to file

   4. Here, also specify the file by referencing the File picker component:{{ui.filepicker.value}}

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

1. Add the File picker component to the working area.

2. Create a new HTTP Request action:

   1. Set the target URL to the server where you want to upload the file

   2. Set the request method to POST

   3. 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' }

3. In your component, select the file you want to upload, and execute the action.

When using Blob or File content with the Binary option, the data will be sent as is. However, for any other content, the system will first attempt to JSON.stringify the data - if successful, the resulting string will be sent; if unsuccessful, it will be converted .toString before sending.

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:

1. Create a new action:

   1. 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 });

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

1. Add the File picker component to the working area.

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

1. Assign the Code action to the On Change trigger of the File picker component.

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