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

<figure><img src="/files/uUg5qpPcc7bs27LBfM3z" alt=""><figcaption></figcaption></figure>

## 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 %}

<figure><img src="/files/nVSvoS6bGhkD6ISnMMly" alt=""><figcaption></figcaption></figure>

### 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.&#x20;

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:<br>

      ```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' }
```

<figure><img src="/files/hNzGJhPxrxUQwPuRnRUy" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/ZyCiDMXaKMFWHwrPWcG7" alt=""><figcaption></figcaption></figure>

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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.uibakery.io/how-tos/file-management/uploading-the-files.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.