MultiFile Upload
Last updated
Was this helpful?
Last updated
Was this helpful?
Added in version v2.0.0
The MultiFile Upload component is a slick and powerful file uploader. It allows users to drag and drop (or select) a number of files and review them before upload. The component supports several languages, meta fields that allow users to enter additional information for each file, file restrictions and an extensive API and events to interact with the component.
MultiFile Upload properties can be found here.
Custom types can be found here.
Optionally, provide rules and conditions to limit the type and/or number of files that can be selected and it is used on the restrictions property of the component.
uploadRestriction properties can be found here.
maxNumberOfFiles also affects the number of files a user is able to select via the system file dialog in UI plugins like DragDrop, FileInput and Dashboard: when set to 1, they will only be able to select a single file. When null or another number is provided, they will be able to select multiple files.
Meta fields can be added to the component and will be shown when a user clicks the “edit” button on a specific file. Adding meta fields enables the “edit” button on file cards.
metaField properties can be found here.
uploadFiles can be retrieved via the getFiles() or getFile(fileID) API calls or will be passed as parameter to some of the handlers of the component.
metaField properties can be found here.
An object detailing a file's transfer progress.
progress properties can be found here.
MultiFile Upload events can be found here.
MultiFile Upload API methods can be found here.
To localize the component, use the language property to choose among any of the shipped languages. If you want to translate single strings differently or provide a full own translation, you can use the localeStrings property to provide those translations.
Below you find all keys and their English translation for reference. Please note that some keys are nested in a complex object, such as
For this to work properly, you have to provide the property of the nested object directly with the key, separated with a dot as in
Here is a list of all keys and their English translation defaults:
addMore - 'Add more' addMoreFiles - 'Add more files' addingMoreFiles - 'Adding more files' allowAccessDescription - 'In order to take pictures or record video with your camera, please allow camera access for this site.' allowAccessTitle - 'Please allow access to your camera' authenticateWith - 'Connect to %{pluginName}' authenticateWithTitle - 'Please authenticate with %{pluginName} to select files' back - 'Back' browse - 'browse' cancel - 'Cancel' cancelUpload - 'Cancel upload' chooseFiles - 'Choose files' closeModal - 'Close Modal' companionAuthError - 'Authorization required' companionError - 'Connection with Companion failed' companionUnauthorizeHint - 'To unauthorize to your %{provider} account, please go to %{url}' complete - 'Complete' connectedToInternet - 'Connected to the Internet' copyLink - 'Copy link' copyLinkToClipboardFallback - 'Copy the URL below' copyLinkToClipboardSuccess - 'Link copied to clipboard' creatingAssembly - 'Preparing upload...' creatingAssemblyFailed - 'Transloadit' dashboardTitle - 'File Uploader' dashboardWindowTitle - 'File Uploader Window (Press escape to close)' dataUploadedOfTotal - '%{complete} of %{total}' done - 'Done' dropHereOr - 'Drop files here or %{browse}' dropHint - 'Drop your files here' dropPaste - 'Drop files here, paste or %{browse}' dropPasteImport - 'Drop files here, paste, %{browse} or import from' edit - 'Edit' editFile - 'Edit file' editing - 'Editing %{file}' emptyFolderAdded - 'No files were added from empty folder' encoding - 'Encoding...' enterCorrectUrl - 'Incorrect URL' enterUrlToImport - 'Enter URL to import a file' exceedsSize - 'This file exceeds maximum allowed size of' failedToFetch - 'Companion failed to fetch this URL, please make sure it’s correct' failedToUpload - 'Failed to upload %{file}' fileSource - 'File source' filesUploadedOfTotal.0 - '%{complete} of %{smart_count} file uploaded' filesUploadedOfTotal.1 - '%{complete} of %{smart_count} files uploaded' filesUploadedOfTotal.2 - '%{complete} of %{smart_count} files uploaded' filter - 'Filter' finishEditingFile - 'Finish editing file' folderAdded.0 - 'Added %{smart_count} file from %{folder}' folderAdded.1 - 'Added %{smart_count} files from %{folder}' folderAdded.2 - 'Added %{smart_count} files from %{folder}' generatingThumbnails - 'Generating thumbnails...' import - 'Import' importFrom - 'Import from %{name}' link - 'Link' loading - 'Loading...' logOut - 'Log out' myDevice - 'My Device' noFilesFound - 'You have no files or folders here' noInternetConnection - 'No Internet connection' openFolderNamed - 'Open folder %{name}' pause - 'Pause' pauseUpload - 'Pause upload' paused - 'Paused' poweredBy - 'Powered by' preparingUpload - 'Preparing upload...' processingXFiles.0 - 'Processing %{smart_count} file' processingXFiles.1 - 'Processing %{smart_count} files' processingXFiles.2 - 'Processing %{smart_count} files' removeFile - 'Remove file' resetFilter - 'Reset filter' resume - 'Resume' resumeUpload - 'Resume upload' retry - 'Retry' retryUpload - 'Retry upload' saveChanges - 'Save changes' selectAllFilesFromFolderNamed - 'Select all files from folder %{name}' selectFileNamed - 'Select file %{name}' selectX.0 - 'Select %{smart_count}' selectX.1 - 'Select %{smart_count}' selectX.2 - 'Select %{smart_count}' smile - 'Smile!' startRecording - 'Begin video recording' stopRecording - 'Stop video recording' takePicture - 'Take a picture' timedOut - 'Upload stalled for %{seconds} seconds, aborting.' unselectAllFilesFromFolderNamed - 'Unselect all files from folder %{name}' unselectFileNamed - 'Unselect file %{name}' upload - 'Upload' uploadComplete - 'Upload complete' uploadFailed - 'Upload failed' uploadPaused - 'Upload paused' uploadXFiles.0 - 'Upload %{smart_count} file' uploadXFiles.1 - 'Upload %{smart_count} files' uploadXFiles.2 - 'Upload %{smart_count} files' uploadXNewFiles.0 - 'Upload +%{smart_count} file' uploadXNewFiles.1 - 'Upload +%{smart_count} files' uploadXNewFiles.2 - 'Upload +%{smart_count} files' uploading - 'Uploading' uploadingXFiles.0 - 'Uploading %{smart_count} file' uploadingXFiles.1 - 'Uploading %{smart_count} files' uploadingXFiles.2 - 'Uploading %{smart_count} files' xFilesSelected.0 - '%{smart_count} file selected' xFilesSelected.1 - '%{smart_count} files selected' xFilesSelected.2 - '%{smart_count} files selected' xMoreFilesAdded.0 - '%{smart_count} more file added' xMoreFilesAdded.1 - '%{smart_count} more files added' xMoreFilesAdded.2 - '%{smart_count} more files added' xTimeLeft - '%{time} left' youCanOnlyUploadFileTypes - 'You can only upload' youCanOnlyUploadX.0 - 'You can only upload %{smart_count} file' youCanOnlyUploadX.1 - 'You can only upload %{smart_count} files' youCanOnlyUploadX.2 - 'You can only upload %{smart_count} files' youHaveToAtLeastSelectX.0 - 'You have to select at least %{smart_count} file' youHaveToAtLeastSelectX.1 - 'You have to select at least %{smart_count} files' youHaveToAtLeastSelectX.2 - 'You have to select at least %{smart_count} files'
The following articles are recommended for additional reading
MultiFile Upload Reference Documentation
To get started with the MultiFile Upload component, drag the component on a form and attach a method to the event. Whenever a file is completely uploaded to the server, this method is fired and receives a object as argument. From that you can get the bytes of the file uploaded, its name, content type etc.
The component can either be shown as a "drop zone" on the form or as a modal dialog. This is controlled via the . When true, the component will render a UI on the form, when false, nothing will be rendered on the form and the component needs to be opened as a modal via the API call.
