File Upload Widget
The IQNOX File Upload Widget is a sleek and powerful file uploader built using the Uppy library, designed to seamlessly integrate into your web applications. This versatile widget offers an intuitive user experience, empowering users to effortlessly upload files of various desired types and sizes with ease. The widget takes advantage of the same Configurator as other widgets to make it easy for developers to style and reuse.
Key Features
- Drag-and-Drop Interface: The widget features a user-friendly drag-and-drop interface, allowing users to simply drag files from their desktop and drop them onto the widget for quick and convenient uploading.
- Multi-Source Uploads: With support for multi-source uploads, users can upload files from a variety of sources including their local device and device camera
- Progress Indicators: Stay informed with real-time progress indicators, providing users with visual feedback on the upload progress of their files. This ensures transparency and keeps users engaged throughout the upload process.
- Customizable Look and Feel: The widget's appearance and functionality are fully customizable through the Configurator, allowing developers to tailor the design to match the branding and style of their application seamlessly.
- Responsive Design: The widget is designed to be fully responsive, ensuring a consistent and optimized experience across a wide range of devices and screen sizes.
- Localization: Due to the high number of strings and combined strings in the widget, making a property for each would have been challenging for developers to use. We have built in localization, which will change the language automatically.
Properties
| Property | Type | Binding | Default | Description |
|---|---|---|---|---|
| CustomClass | STRING | <> | Enables you to define an html class to the top div of the widget. Multiple classes can be entered, separated by space | |
| Template | LIST | < | Template 1 | This will be the template used for the widget styling |
| MaxFileSize | STRING | Maximum file size for each individual file. Ex: 10K, 10M, 10G. Increments of 1000. | ||
| MinFileSize | STRING | Minimum file size for each individual file. Ex: 10K, 10M, 10G. Increments of 1000. | ||
| MaxTotalFileSize | STRING | Maximum file size for all the files that can be selected for upload. Ex: 10K, 10M, 10G. Increments of 1000. | ||
| MaxNumberOfFiles | INTEGER | Total number of files that can be selected | ||
| MinNumberOfFiles | INTEGER | Minimum number of files that can be selected | ||
| GenerateThumbnail | BOOLEAN | FALSE | Will generate thumbnails for image file types | |
| ThumbnailWidth | INTEGER | 200 | Width of the resulting thumbnail in pixels | |
| ThumbnailType | LIST | jpg | File type of the resulting thumbnail | |
| AllowedFileTypes | STRING | As a CSV array, the file types that can be allowed. For example: "image/*, .jpg, .jpeg, .png, .gif" | ||
| FileRepository | THINGNAME | < | Folder on the file repository where files are uploaded to | |
| FolderPath | STRING | < | / | URI describing the icon that's going to be used. Either a HTTP link or a reference to an icon in an icon font can be used. |
| EnableCameraInput | BOOLEAN | TRUE | Enable webcam input | |
| ShowProgressDetails | LIST | FALSE | Toggle between a simple percentage and remaining upload size and time to show progress in Status Bar | |
| ShowUploadButton | BOOLEAN | TRUE | Show the upload button. Set to false if using the Upload service to trigger the uploads | |
| AutoProceed | BOOLEAN | FALSE | Upload files as soon as they are selected, without the need of user input | |
| UploadInstructions | STRING(localized) | Optionally, specify a string of text that explains something about the upload for the user. This is a place to explain any restrictions that are put in place. | ||
| UploadResult | INFOTABLE | > | Output containing result of the latest upload. See 1 for a definition of this datashape. | |
| SelectedFiles | INFOTABLE | > | Output containing all the selected files, not necessarily only the ones that were uploaded. See 2 for a definition of this datashape. |
Services
| Property | Type | Binding | Description |
|---|---|---|---|
| Upload | SERVICE | < | Triggers the upload of all selected files. |
| SelectFiles | SERVICE | < | Triggers OS file picker. |
| ClearSelectedFiles | SERVICE | < | Clears the staging area. |
Events
| Property | Type | Binding | Description |
|---|---|---|---|
| UploadStarted | EVENT | > | Fired when the upload starts. |
| UploadComplete | EVENT | > | Fired when the upload completes. Note that some files may have failed. |
| FileSelectionChanged | EVENT | > | Fired when the selected files are updated. |
Localization customization
To facilitate customization for the multiple localizable strings the widget allows, tokens have been created for each property in every language currently in Thingworx. The values assigned to these tokens came directly from the library used to create the widget and can be changed at any time.
To change the value of a token, go to the localization table for the desired language, search for the specific token you need by using the iqnox.widgets.fileUpload prefix and changing the value associated to the token. If a token does not have a set value, it will default to the english value.
Output definitions
The widget has two output properties: UploadResult and SelectedFiles. Descriptions of their fields are listed below. Note that these datashapes are not imported with the rest of the package, so my may need to be created manually.
Alternatively, you can also import the datashapes from the DataShapes_FileUploadDatashapes_DS.xml file from here.
Footnotes
-
UploadResult property automatically gets value when an upload is complete, and contains the following fields:
↩Field Name Type Description source STRING How the file was selected to be uploaded. Most of the case, this will be Dashboard.name STRING Name of the file uploaded. extension STRING Extension of the file uploaded. type STRING MIME-type of the file uploaded. Not guaranteed to be correct. size STRING Size of the file uploaded, in bytes. filePath STRING Path to the file uploaded in the FileRepository fileRepository STRING Name of the FileRepository where the file was uploaded. downloadUrl STRING URL to download the file. error STRING Error message if the file failed to upload. -
SelectedFiles property is updated whenever the files selected are changed, and has the following fields:
Field Name Type Description source STRING How the file was selected to be uploaded. Most of the case, this will be Dashboard.name STRING Name of the file uploaded. extension STRING Extension of the file uploaded. type STRING MIME-type of the file uploaded. Not guaranteed to be correct. size STRING Size of the file uploaded, in bytes. filePath STRING Path to the file uploaded in the FileRepository fileRepository STRING Name of the FileRepository where the file was uploaded. downloadUrl STRING URL to download the file. error STRING Error message if the file failed to upload. progress JSON Progress of the file upload. The
progressfield is a JSON object with the following definition:↩interface FileProgressBase {
uploadComplete?: boolean
percentage?: number // undefined if we don't know the percentage (e.g. for files with `bytesTotal` null)
bytesTotal: number | null
preprocess?: FileProcessingInfo
postprocess?: FileProcessingInfo
uploadStarted: number
bytesUploaded: number
}