Skip to main content

File Upload (ALPHA)

BusinessEnterprise
Alpha feature: invite only

Responsive Widgets are in alpha and available by invitation only on Business and Enterprise plans. Behavior and properties may change. To request access, open a support ticket and name the feature Responsive Widgets (ALPHA).

The File Upload widget lets users pick files from their device. It shows as a button or as a drag-and-drop zone. The selected files are in the files reference property, so you can send them to an API or storage service from a query.

Widget type: WDS_FILE_UPLOAD_WIDGET

File Upload widget in a Responsive app
File Upload widget

Content properties​

These properties appear in the Content tab of the property pane.

Data​

Allowed file types array​

Limits the types of files users can pick. This check and Max file size run in the browser only, and users can get around them. Check file type and size again in your query or backend. You can pick more than one type. Options:

  • Any File: *
  • Images: image/*
  • Videos: video/*
  • Audio: audio/*
  • Text: text/*
  • MS Word: .doc
  • JPEG: image/jpeg
  • PNG: .png

Default: [].

Example:

{{["image/*", ".png"]}}

Data format string​

Sets the format of the file data in files[].data. Default: Base64. You cannot bind this property. Options:

  • Base64
  • Binary
  • Text
  • Array of Objects (CSV, XLS(X), JSON, TSV): reads table files as an array of rows. Other file types get an empty value. Large files used in widgets can slow down the app.

Infer data-types from CSV boolean​

Tries to find the best data type for each value in a CSV file. Default: on. Shows only when Data format is Array of Objects (CSV, XLS(X), JSON, TSV).

Max no. of files number​

Sets how many files users can pick at once. Default: 1.

Label​

Text string​

Sets the label of the upload button. Default: Select Files.

Validation​

Required boolean​

Makes it required to pick at least one file. Default: off.

Max file size(Mb) number​

Sets the largest allowed size of each file, in MB. Takes a value from 1 to 200. Default: 5.

General​

Visible boolean​

Controls whether the widget is visible. Default: on.

Disabled boolean​

Stops users from picking files. Default: off.

Animate loading boolean​

Controls the loading animation of the widget. Default: on.

Events​

onFilesSelected​

Sets the action that runs when a user picks files. See Events.

Style properties​

These properties appear in the Style tab of the property pane.

Appearance​

Variant string​

Sets how the widget looks. Options: Button (default) or Drop zone. You cannot bind this property.

Values: button, dropzone.

Reference properties​

Reference properties let you read the widget's state in bindings and code, for example {{FileUpload1.isVisible}}. You cannot set them directly.

files array​

Holds the selected files. Each file is an object with id, name, type, size, data, and dataFormat.

Example:

{{FileUpload1.files[0].data}}

isValid boolean​

Shows whether the widget is valid. If Required is on, it is true only when at least one file is selected.

Example:

{{FileUpload1.isValid}}

isDirty boolean​

Shows whether the user has picked files since the widget loaded.

Example:

{{FileUpload1.isDirty}}

isVisible boolean​

Shows whether the widget is visible.

Example:

{{FileUpload1.isVisible}}

isDisabled boolean​

Shows whether the widget is disabled.

Example:

{{FileUpload1.isDisabled}}

Methods​

Methods let you change the widget's properties from code, for example in a JS Object.

You cannot set files from code. Users must pick files themselves. To clear the selection, use resetWidget("FileUpload1").

setVisibility (param: boolean): Promise​

Shows or hides the widget.

Example:

FileUpload1.setVisibility(false)

setDisabled (param: boolean): Promise​

Turns the widget on or off.

Example:

FileUpload1.setDisabled(true)

Events​

onFilesSelected​

Runs when a user picks files. Read the files in {{FileUpload1.files}}, and upload them from this action.