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:

Returns: {Boolean}


onFileAdded(fileAdded,event)

Fired when a file is added.

Parameters:


onFileRemoved(fileRemoved,event)

Fired when a file is removed from the component.

Parameters:


onFileUploaded(jsUpload,event)

Fired when a file is successfully uploaded.

Parameters:

  • {JSUpload} jsUpload The upload object containing details about the uploaded file

  • {JSEvent} event The event object associated with the upload


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:


onUploadComplete(successfulFiles,failedFiles,event)

Fired when all file uploads are complete.

Parameters:


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:

  • {Object} message String, details: String}} message

  • {String} [type] Info, warning, success or error (defaults to info)

  • {Number} [duration] The duration in milliseconds (defaults to 3000)


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?