MultiFile Upload
(part of package 'Servoy Extra Components') Extends designtime/SolutionModel: JSWebComponent Extends runtime: RuntimeWebComponent
A Servoy Extra Component that supports multi-file upload functionality.
This is a reference page; many components have detailed usage guides here.
Properties
allowMultipleUploads
Should not be used together with closeAfterFinish (so both properties to be true) Type: Boolean Default Value: true
autoProceed
By default the component will wait for an upload button to be pressed in the UI, or the upload() method to be called, before starting an upload. Setting this to autoProceed: true will start uploading automatically after the first file is selected. Type: Boolean Default Value: false
closeAfterFinish
Whether to automatically close the modal when all current uploads are complete. If this is set, allowMultipleUploads and inline properties ahould be false. Type: Boolean Default Value: false
disableStatusBar
Whether to show upload progress and pause/resume/cancel buttons. Type: Boolean Default Value: false
hideUploadButton
Hide the upload button. Use this if you are providing a custom upload button somewhere, and using the upload() API. Type: Boolean Default Value: false
inline
When false, the component does not show on the form, but in a modal that is shown when openModal() is called. Should not be used together with closeAfterFinish (so both properties to be true) Type: Boolean Default Value: true
language
One of the language packs shipped. If you need to provide your own translations, use the localeStrings property. Type: String Default Value: null
localeStrings
Any number of key/value pairs to translate single strings in the component, overriding the ones provided by the language pack selected. Type: Map
metaFields
An array of UI field objects that will be shown when a user clicks the 'edit' button on that file Type: Array<CustomType<servoyextra-multifileupload.metaField>>
note
A note associated with the component. Type: Tagstring
options
A map of additional options. Type: Map
responsiveHeight
Height (in pixels) to be set in a responsive form. Type: Number Default Value: 450
responsiveWidth
Width to be set in a responsive form. Can be a number (in pixels) or a percent. Type: String Default Value: "290"
restrictions
Provide rules and conditions to limit the type and/or number of files that can be selected. Type: CustomType<servoyextra-multifileupload.uploadRestriction>
sources
Allows to add additional sources of files (other than the user's file system) Type: Array<String>
styleClass
CSS style classes applied to the component. Type: Styleclass
tusOptions
Look at the Uppy TUS options what you can set here like chunkSize: nrOfBytes Type: Map
visible
Flag indicating whether the component is visible. Type: Visible Default Value: true
webcamOptions
Look at the Uppy webcam plugin options what you can set here like showVideoSourceDropdown Type: Json Default Value: {"target":"Dashboard","showVideoSourceDropdown":true}
Events
onBeforeFileAdded(fileToAdd,files,event)
Called before a file is added. Return true if the file should be accepted, or false otherwise.
Parameters:
{CustomType<servoyextra-multifileupload.uploadFile>} fileToAdd The file object to be added
{Array<CustomType<servoyextra-multifileupload.uploadFile>>} files The current array of file objects in the component
{JSEvent} event The event object associated with the file addition
Returns: {Boolean}
onFileAdded(fileAdded,event)
Fired when a file is added.
Parameters:
{CustomType<servoyextra-multifileupload.uploadFile>} fileAdded The file object that was added
{JSEvent} event The event object associated with the addition
onFileRemoved(fileRemoved,event)
Fired when a file is removed from the component.
Parameters:
{CustomType<servoyextra-multifileupload.uploadFile>} fileRemoved The file object that was removed
{JSEvent} event The event object associated with the removal
onFileUploaded(jsUpload,event)
Fired when a file is successfully uploaded.
Parameters:
onModalClosed()
Fired when the modal window is closed.
onModalOpened()
Fired when the modal window is opened.
onRestrictionFailed(file,error,event)
Called when a file fails to meet the specified restrictions.
Parameters:
{CustomType<servoyextra-multifileupload.uploadFile>} file The file object that failed the restrictions
{String} error The error message describing why the restriction failed
{JSEvent} event The event object associated with the restriction failure
onUploadComplete(successfulFiles,failedFiles,event)
Fired when all file uploads are complete.
Parameters:
{Array<CustomType<servoyextra-multifileupload.uploadFile>>} successfulFiles The array of file objects that were uploaded successfully
{Array<CustomType<servoyextra-multifileupload.uploadFile>>} failedFiles The array of file objects that failed to upload
{JSEvent} event The event object associated with the upload completion
API
cancelAll()
Cancel all uploads, reset progress and remove all files.
closeModal()
Close the modal window
getFile(fileID)
Get a specific file object by its ID
Parameters:
{String} fileID The unique identifier of the file to retrieve.
Returns: CustomType<servoyextra-multifileupload.uploadFile> The file object corresponding to the given file ID, or null if no such file exists.
getFiles()
Get an array of all file objects in the component
Returns: Array<CustomType<servoyextra-multifileupload.uploadFile>> An array of all file objects currently in the component.
info(message,type,duration)
Sets a message in state, with optional details
Parameters:
initialize()
(Re-)initializes the component
openModal()
Open the modal window
removeFile(fileID)
Remove a file from the component
Parameters:
{String} fileID The unique identifier of the file to be removed from the component.
reset()
Stop all uploads in progress and clear file selection, set progress to 0. Basically, return things to the way they were before any user input.
retryAll()
Retry all uploads (after an error, for example)
retryUpload(fileID)
Retry an upload (after an error, for example).
Parameters:
{String} fileID The unique identifier of the file to retry uploading.
upload()
Start uploading selected files.
Types
metaField
Represents a meta field used for additional file information. scripting type: CustomType<servoyextra-multifileupload.metaField>
id
Unique identifier for the meta field.
Type: string
name
The name of the meta field.
Type: string
placeholder
Placeholder text for the meta field.
Type: tagstring
progress
Represents the progress information for a file upload. scripting type: CustomType<servoyextra-multifileupload.progress>
bytesTotal
Total number of bytes to be uploaded.
Type: int
bytesUploaded
Number of bytes uploaded so far.
Type: int
percentage
Upload progress percentage.
Type: int
uploadComplete
Flag indicating whether the upload is complete.
Type: boolean
uploadStarted
Timestamp indicating when the upload started.
Type: int
uploadFile
Represents a file uploaded via the component. scripting type: CustomType<servoyextra-multifileupload.uploadFile>
error
Error message if the file upload failed.
Type: string
extension
The file extension (e.g. 'jpg', 'png').
Type: string
id
Unique identifier for the file.
Type: string
metaFields
Meta data fields associated with the file.
Type: object
name
The name of the file.
Type: string
progress
The progress object representing the file upload progress.
Type: progress
type
The MIME type of the file.
Type: string
uploadRestriction
Represents the restrictions for file uploads. scripting type: CustomType<servoyextra-multifileupload.uploadRestriction>
allowedFileTypes
An array of allowed file types (e.g. ['image/jpeg', 'image/png']).
Type: string[]
maxFileSize
The maximum allowed file size in bytes.
Type: long
Default Value: null
maxNumberOfFiles
The maximum number of files that can be selected.
Type: int
Default Value: null
minNumberOfFiles
The minimum number of files that must be selected.
Type: int
Default Value: null
Last updated
Was this helpful?