# Uploading files using methods
In this article, we'll explore ways of uploading files in UI Bakery using the following methods:
* [Form Data](#uploading-files-via-the-http-action-and-form-data-method)
* [Binary](#uploading-files-via-the-http-action-and-binary-method)
* [Fetch](#uploading-files-via-the-fetch-method)
## 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
{% hint style="warning" %}
Before you proceed to the instruction below, ensure your server is configured to **accept** the **binary format** for file uploads.
{% endhint %}
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.
{% hint style="info" %}
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.
{% endhint %}
### 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:
```javascript
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:
```javascript
{ 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:
```javascript
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.
3. Assign the Code action to the **On Change** trigger of the *File picker* component.
4. 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.
