# Upload

The **Upload** widget provides a comprehensive interface for file and/or photo uploads. Users can select one or multiple files, which can be stored either as physical files on the server or as Base64-encoded buffers within your data.

The widget includes features like file type restriction, multi-file selection, and thumbnail previews.

<figure><img src="https://3495989837-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FE5Ketpww1s7TauSAJrJ8%2Fuploads%2FTNXGPwMKnRm18dj7iq1z%2FUpload_bottom_looped.gif?alt=media&#x26;token=d96bd6db-52f4-4f1d-8177-b5f5060f0ebd" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3495989837-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FE5Ketpww1s7TauSAJrJ8%2Fuploads%2FMAp3sLL1KgXKvpgxAP9T%2Fupload_bottom.png?alt=media&#x26;token=798919a5-3fe4-4a1a-a0b2-2086f53e9408" alt=""><figcaption><p>A full and an empty upload widget</p></figcaption></figure>

## Data Binding

Connect the widget to your application's logic by dragging the corresponding items from the Flow Builder.

### Input

| **Property** | **Type** | **Description**                                                                                                                                            |
| ------------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`files`**  | `Array`  | Fired whenever files are successfully uploaded or deleted. The payload is an array of file objects. See the **File Object Structure** section for details. |

### Output

| **Property** | **Type**  | **Description**                                         |
| ------------ | --------- | ------------------------------------------------------- |
| **`clear`**  | `Boolean` | When `true`, clears all uploaded files from the widget. |

#### File Object Structure

The structure of the file objects in the `files` array depends on the configured **Storage Type**.

**If `Storage Type` is `File`:**

```json
{
  "lastModified": 1678886400000,
  "name": "document.pdf",
  "size": 102400,
  "type": "application/pdf",
  "path": "/shared/runtime-files/a1b2c3d4e5.pdf"
}

```

**If `Storage Type` is `Buffer`:**

```json
{
  "lastModified": 1678886400000,
  "name": "image.png",
  "size": 51200,
  "type": "image/png",
  "base64": "iVBORw0KGgoAAAANSUhEUgA..."
}

```

## Configuration

### Settings

These properties control the behavior and appearance of the file widget.

| **Label**                   | **Description**                                                                                         | **Type** | **Property**      |
| --------------------------- | ------------------------------------------------------------------------------------------------------- | -------- | ----------------- |
| **Storage Type**            | Determines how the uploaded file is stored: as a physical `File` on the server or as a Base64 `Buffer`. | String   | `storageType`     |
| **Restrict File Types**     | Restricts the selectable file types. Users can select one or more predefined categories.                | Array    | `accept`          |
| **Allow Multi-File Upload** | If `true`, users can select and upload multiple files at once.                                          | Boolean  | `multiple`        |
| **Maximum Number Of Files** | The total number of files that can be uploaded to the widget.                                           | Integer  | `maxFiles`        |
| **Show Thumbnails**         | If `true`, displays a preview thumbnail for uploaded image files.                                       | Boolean  | `showThumbnails`  |
| **Thumbnail Size**          | Sets the height (in pixels) of the preview thumbnails.                                                  | Number   | `thumbnailHeight` |

### Taking Photos exclusively

<div align="left"><figure><img src="https://3495989837-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FE5Ketpww1s7TauSAJrJ8%2Fuploads%2FmhTcOwXPQwA85AdSPx6j%2FUpload_photo.png?alt=media&#x26;token=1bb036cd-d12c-4037-a8e3-2c53a5213329" alt=""><figcaption></figcaption></figure></div>

When only selecting the `Photo` option, modern devices like mobile phones and tablets will directly open the camera upon clicking this widget's button. If you want to allow a combination of file and camera uploads simply select all allowed categories leaving the `Photo` active.

### Button Configuration

The file selection is triggered by a button. You can customize its appearance using standard button properties. Common properties include:

* **`text`**: The text displayed on the button (e.g., "Upload File").
* **`icon`**: The icon displayed on the button (e.g., "upload").
* **`type`**: The button's style type (`normal`, `default`, `success`, `danger`).
* **`stylingMode`**: The visual style of the button (`text`, `outlined`, `contained`).

These properties are configured within a `button` object.