# File Upload

![organizing info](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-5485375aa2ea9607e38f2bbb4e6cbfebc0ce2514%2Ffile-upload-web-control-v181-0.gif?alt=media)

The File Upload Web Control collects files from app users. When users click on this Control, it will prompt them to select an item for upload.&#x20;

The File Upload Web Control differs from other Web Controls in that it doesn't have a default appearance: the styling is entirely customizable, with other Web Controls used as component parts. Additionally, the File Upload Web Control does not come out of the box with input binding: rather than maintaining a variable that contains uploaded an [Asset](../variable-data-types/the-asset-data-type), it triggers [Events](../studio/events) with associated values related to the file's upload progress.

## General

### Control Properties

#### Type

The type of Asset the File Upload Web Control will accept. The default choices are Images, PDF, and video. If required to accept multiple types, add the asset types as an expression in quotes.&#x20;

For example:&#x20;

```javascript
"image/jpeg", "image/png", "application/pdf", "image/svg+xml", "image/gif", "audio/mpeg", "video/mp4"
```

**Supported Types**

| **Mime Type**                                                     | **Type of Data**                       |
| ----------------------------------------------------------------- | -------------------------------------- |
| image/jpeg                                                        | Jpeg Image                             |
| image/png                                                         | PNG Image                              |
| image/jpg                                                         | JPG Image                              |
| image/svg+xml                                                     | An SVG XML file                        |
| image/gif                                                         | GIF image                              |
| image/svg                                                         | An SVG file                            |
| image/vnd.microsoft.icon                                          | .ico file                              |
| image/x-icon                                                      | .ico file                              |
| audio/mpeg                                                        | MPEG Audio data                        |
| audio/mp3                                                         | An MP3 file                            |
| audio/wav                                                         | WAV audio file                         |
| video/mp4                                                         | MP4 Video file                         |
| text/html                                                         | HTML file                              |
| text/plain                                                        | TXT file                               |
| application/zip                                                   | Compressed Zip file                    |
| application/pgp-encrypted                                         | First part of PGP encrypted data, body |
| application/pdf                                                   | PDF                                    |
| application/vnd.ms-excel                                          | Microsoft Excel file                   |
| application/vnd.openxmlformats-officedocument.spreadsheetml.sheet | Microsoft Excel (OpenXML)              |
| application/font-woff2                                            | Web Open Font Format (WOFF)            |
| font/otf                                                          | OpenType font                          |
| font/ttf                                                          | TrueType Font                          |
| font/woff                                                         | Web Open Font Format (WOFF)            |
| font/woff2                                                        | Web Open Font Format (WOFF)            |

> 📘 Limiting uploaded file types When configuring file types, the property will limit the dropdown to specific files depending on the user's operating system. If a user uploads a virus or bad file, the file will be rejected.
>
> **Note:** The file explorer filter can be changed to "All Files" depending on the browser or operating system, even if the type property is configured.

#### Allow Multiple Files

When checked, allows end users to select multiple files from the prompt that pops up.

#### Hash Type

The hash type selected from the dropdown will automatically generate a hash when files are uploaded to the Asset store.

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-1152ac7eae0d277170eb7061b63e0a650df44e7e%2Ffile-upload-web-control-v181-1.png?alt=media)

#### Aria Label

Expects type `text`.

Defines a value to the aria-label of the control for accessibility. For more information see [here](https://www.w3.org/TR/WCAG20-TECHS/ARIA14.html).

### Advanced Control Properties

#### Link Expiration

Expects type `number`.

The number of milliseconds (an integer) that the downloaded Asset still has before expiration. This value is updated each time the download link is fetched.

This property is only valid on Assets with a visibility of type **Private**, and providing a value for this property will automatically make the uploaded Asset **Private**. If the Link Expiration property is left blank, the Asset will be a global Asset.&#x20;

#### Image Size

Expects type `object` in the following form:

```json
{ "width": px_width, "height": px_height }
```

where `px_width` and `px_height` are both type `number`.

This allows for resizing of Assets as they are uploaded. Resized images will be `px_width` pixels wide and `px_height` pixels heigh.

This property does **not** change the limit of the size of the image users are allowed to upload. A 10mbyte size limit is enforced on all Assets across the board.

### Style

The elements within the File Upload Web Control can be styled. See [Common Style Properties of Web Controls](web-controls-overview/common-style-properties-of-web-controls).

## Actions

#### On Upload Started Event

Triggers when the user chooses which file to upload

#### On Upload Progress Event

Triggers repeatedly while the file is being uploaded. Changes the value of `event.value.progress` as it increases incrementally from 0 to 1.

#### On Upload Finished Event

Triggers when the file has been uploaded and virus scan has completed successfully.

#### On Upload Failed Event

Triggers if an error occurs in creating and/or uploading the file. Changes the value of `event.progress.error` from `NULL` to something that reflects the nature of the error.

## Advanced

### State

#### Is Visible

Expects type `boolean`.

If `TRUE` the control will be visible. If `FALSE` the control will not be displayed. If the field is empty, the control will be visible.

#### Is Disabled

Expects type `boolean`.

If `TRUE` the control will be disabled and the user will not be able to interact with the control. If `FALSE` the control will be enabled. If the field is empty, the control will be enabled.

## Referencing User Input

Rather than maintaining a variable that contains uploaded files, the File Upload Web Control triggers [Events](../studio/events) with associated values related to the file's upload progress.&#x20;

Every Event associated with a File Upload Web Control has access to a variable, `event.value` , with the following properties:

* asset (type: [**Detailed Asset**](../variable-data-types/the-asset-data-type/the-detailed-asset))\
  A Detailed Asset that references the uploaded file. Note that a Detailed Asset is a subcategory of an [Asset](../variable-data-types/the-asset-data-type); it can be used as input for functions that require an Detailed Asset, such as [ASSET\_THUMBNAIL\_URI](../airscript-expressions/asset-functions/asset_thumbnail_url) or [ASSET\_STATE](../airscript-expressions/asset-functions/asset_state).
* process (type: [Number](../variable-data-types/the-number-variable-data-type) )\
  Represents how much of the file has been uploaded, where 0 represents a file that has just started the downloading process and 1 represents a fully downloaded file.\
  A value of 0.5, for instance, indicates that the file is 50% uploaded.
* error (type: [Any (JSON)](../variable-data-types/the-any-json-variable-data-type) )\
  If an error has occurred, this will provide insight into the nature of the error. `NULL` otherwise.

To reference any of these properties outside the context of the Events associated with the File Upload Web Control, their values will need to be saved to [Airdata](../data-and-integrations/airdata) or to [variables of broader scope](../data-and-integrations/variable-namespaces).

## Security

When a user uploads an asset through the File Upload Control, the asset is scanned for Trojans, viruses and other malware. If the asset is deemed safe, then the control will run [On Upload Finished Event](#on-upload-finished-event). If the asset does not pass the malware scan, then the control will run the [On Upload Failed Event](#on-upload-failed-event).

## Example

Check out this Building Byte video on how to use the File Upload Control:

\[block:embed] { "html": "\<iframe class="embedly-embed" src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FmbdBMB9B--Q%3Ffeature%3Doembed\&display\_name=YouTube\&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DmbdBMB9B--Q\&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FmbdBMB9B--Q%2Fhqdefault.jpg\&key=7788cb384c9f4d5dbbdbeffd9fe4b92f\&type=text%2Fhtml\&schema=youtube" width="854" height="480" scrolling="no" title="YouTube embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true">", "url": "https://www.youtube.com/watch?v=mbdBMB9B--Q", "title": "File upload control", "favicon": "https://www.google.com/favicon.ico", "image": "https://i.ytimg.com/vi/mbdBMB9B--Q/hqdefault.jpg", "provider": "youtube.com", "href": "https://www.youtube.com/watch?v=mbdBMB9B--Q", "typeOfEmbed": "youtube" } \[/block]
