File Upload

organizing info

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. 

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, it triggers 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. 

For example: 

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

Supported Types

Mime TypeType of Data
image/jpegJpeg Image
image/pngPNG Image
image/jpgJPG Image
image/svg+xmlAn SVG XML file
image/gifGIF image
image/svgAn SVG file
image/vnd.microsoft.icon.ico file
image/x-icon.ico file
audio/mpegMPEG Audio data
audio/mp3An MP3 file
audio/wavWAV audio file
video/mp4MP4 Video file
text/htmlHTML file
text/plainTXT file
application/zipCompressed Zip file
application/pgp-encryptedFirst part of PGP encrypted data, body
application/pdfPDF
application/vnd.ms-excelMicrosoft Excel file
application/vnd.openxmlformats-officedocument.spreadsheetml.sheetMicrosoft Excel (OpenXML)
application/font-woff2Web Open Font Format (WOFF)
font/otfOpenType Font
font/ttfTrueType Font
font/woffWeb Open Font Format (WOFF)
font/woff2Web Open Font Format (WOFF)
text/csvCSV Files

📘

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.

470

Aria Label

Expects type text.

Defines a value to the aria-label of the control for accessibility. For more information see here.

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. 

Image Size

Expects type object in the following form:

{ "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.

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 with associated values related to the file's upload progress. 

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

  • asset (type: Detailed Asset)
    A Detailed Asset that references the uploaded file. Note that a Detailed Asset is a subcategory of an Asset; it can be used as input for functions that require an Detailed Asset, such as ASSET_THUMBNAIL_URI or ASSET_STATE.

  • process (type: Number)
    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))
    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 or to variables of broader scope.

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. If the asset does not pass the malware scan, then the control will run the On Upload Failed Event.

Example

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