Skip to main content

File Upload Widget

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

PropertyTypeBindingDefaultDescription
CustomClassSTRING<>Enables you to define an html class to the top div of the widget. Multiple classes can be entered, separated by space
TemplateLIST<Template 1This will be the template used for the widget styling
MaxFileSizeSTRINGMaximum file size for each individual file. Ex: 10K, 10M, 10G. Increments of 1000.
MinFileSizeSTRINGMinimum file size for each individual file. Ex: 10K, 10M, 10G. Increments of 1000.
MaxTotalFileSizeSTRINGMaximum file size for all the files that can be selected for upload. Ex: 10K, 10M, 10G. Increments of 1000.
MaxNumberOfFilesINTEGERTotal number of files that can be selected
MinNumberOfFilesINTEGERMinimum number of files that can be selected
GenerateThumbnailBOOLEANFALSEWill generate thumbnails for image file types
ThumbnailWidthINTEGER200Width of the resulting thumbnail in pixels
ThumbnailTypeLISTjpgFile type of the resulting thumbnail
AllowedFileTypesSTRINGAs a CSV array, the file types that can be allowed. For example: "image/*, .jpg, .jpeg, .png, .gif"
FileRepositoryTHINGNAME<Folder on the file repository where files are uploaded to
FolderPathSTRING</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.
EnableCameraInputBOOLEANTRUEEnable webcam input
ShowProgressDetailsLISTFALSEToggle between a simple percentage and remaining upload size and time to show progress in Status Bar
ShowUploadButtonBOOLEANTRUEShow the upload button. Set to false if using the Upload service to trigger the uploads
AutoProceedBOOLEANFALSEUpload files as soon as they are selected, without the need of user input
UploadInstructionsSTRING(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.
UploadResultINFOTABLE>Output containing result of the latest upload.
SelectedFilesINFOTABLE>Output containing all the selected files, not necessarily only the ones that were uploaded

Services

PropertyTypeBindingDescription
UploadSERVICE<Triggers the upload of all selected files.
SelectFilesSERVICE<Triggers OS file picker.
ClearSelectedFilesSERVICE<Clears the staging area.

Events

PropertyTypeBindingDescription
UploadStartedEVENT>Fired when the upload starts.
UploadCompleteEVENT>Fired when the upload completes. Note that some files may have failed.
FileSelectionChangedEVENT>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.