# MultiFile Upload

(part of package '[Servoy Extra Components](/reference/servoyextensions/packages/ui-component-packages/servoy-extra-components.md)')\
Extends designtime/SolutionModel: [JSWebComponent](/reference/servoycore/dev-api/solutionmodel/jswebcomponent.md)\
Extends runtime: [RuntimeWebComponent](/reference/servoycore/dev-api/forms/runtimeform/elements/runtimewebcomponent.md)

A Servoy Extra Component that supports multi-file upload functionality.

This is a reference page; many components have detailed usage guides [here](https://docs.servoy.com/guides/develop/application-design/ui-components).

## Properties

### allowMultipleUploads

Should not be used together with closeAfterFinish (so both properties to be true) Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) 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](/reference/servoycore/dev-api/js-lib/boolean.md) 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](/reference/servoycore/dev-api/js-lib/boolean.md) Default Value: false

***

### disableStatusBar

Whether to show upload progress and pause/resume/cancel buttons. Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) 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](/reference/servoycore/dev-api/js-lib/boolean.md) 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](/reference/servoycore/dev-api/js-lib/boolean.md) Default Value: true

***

### language

One of the language packs shipped. If you need to provide your own translations, use the localeStrings property. Type: [String](/reference/servoycore/dev-api/js-lib/string.md) 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](/reference/servoy-developer/component_and_service_property_types.md#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>>](#metafield)

***

### note

A note associated with the component. Type: [Tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring)

***

### options

A map of additional options. Type: [Map](/reference/servoy-developer/component_and_service_property_types.md#map)

***

### responsiveHeight

Height (in pixels) to be set in a responsive form. Type: [Number](/reference/servoycore/dev-api/js-lib/number.md) Default Value: 450

***

### responsiveWidth

Width to be set in a responsive form. Can be a number (in pixels) or a percent. Type: [String](/reference/servoycore/dev-api/js-lib/string.md) 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>](#uploadrestriction)

***

### sources

Allows to add additional sources of files (other than the user's file system) Type: [Array\<String>](/reference/servoycore/dev-api/js-lib/string.md)

***

### styleClass

CSS style classes applied to the component. Type: [Styleclass](/reference/servoy-developer/component_and_service_property_types.md#styleclass)

***

### tusOptions

Look at the Uppy TUS options what you can set here like chunkSize: nrOfBytes Type: [Map](/reference/servoy-developer/component_and_service_property_types.md#map)

***

### visible

Flag indicating whether the component is visible. Type: [Visible](/reference/servoy-developer/component_and_service_property_types.md#visible) Default Value: true

***

### webcamOptions

Look at the Uppy webcam plugin options what you can set here like showVideoSourceDropdown Type: [Json](/reference/servoycore/dev-api/js-lib/json.md) 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>](#uploadfile)} fileToAdd The file object to be added
> * {[Array\<CustomType\<servoyextra-multifileupload.uploadFile>>](#uploadfile)} files The current array of file objects in the component
> * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event The event object associated with the file addition

**Returns:** {[Boolean](/reference/servoycore/dev-api/js-lib/boolean.md)}

***

### onFileAdded(fileAdded,event)

Fired when a file is added.

**Parameters:**

> * {[CustomType\<servoyextra-multifileupload.uploadFile>](#uploadfile)} fileAdded The file object that was added
> * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} 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>](#uploadfile)} fileRemoved The file object that was removed
> * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event The event object associated with the removal

***

### onFileUploaded(jsUpload,event)

Fired when a file is successfully uploaded.

**Parameters:**

> * {[JSUpload](/reference/servoycore/dev-api/application/jsupload.md)} jsUpload The upload object containing details about the uploaded file
> * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} 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:**

> * {[CustomType\<servoyextra-multifileupload.uploadFile>](#uploadfile)} file The file object that failed the restrictions
> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} error The error message describing why the restriction failed
> * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} 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>>](#uploadfile)} successfulFiles The array of file objects that were uploaded successfully
> * {[Array\<CustomType\<servoyextra-multifileupload.uploadFile>>](#uploadfile)} failedFiles The array of file objects that failed to upload
> * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} 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](/reference/servoycore/dev-api/js-lib/string.md)} fileID The unique identifier of the file to retrieve.

**Returns:** [CustomType\<servoyextra-multifileupload.uploadFile>](#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>>](#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](/reference/servoycore/dev-api/js-lib/object.md)} message String, details: String}} message
> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} \[type] Info, warning, success or error (defaults to info)
> * {[Number](/reference/servoycore/dev-api/js-lib/number.md)} \[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](/reference/servoycore/dev-api/js-lib/string.md)} 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](/reference/servoycore/dev-api/js-lib/string.md)} 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](/reference/servoycore/dev-api/js-lib/string.md)
* name
  * The name of the meta field.
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
* placeholder
  * Placeholder text for the meta field.
  * **Type**: [tagstring](/reference/servoy-developer/component_and_service_property_types.md#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](/reference/servoycore/dev-api/js-lib/number.md)
* bytesUploaded
  * Number of bytes uploaded so far.
  * **Type**: [int](/reference/servoycore/dev-api/js-lib/number.md)
* percentage
  * Upload progress percentage.
  * **Type**: [int](/reference/servoycore/dev-api/js-lib/number.md)
* uploadComplete
  * Flag indicating whether the upload is complete.
  * **Type**: [boolean](/reference/servoycore/dev-api/js-lib/boolean.md)
* uploadStarted
  * Timestamp indicating when the upload started.
  * **Type**: [int](/reference/servoycore/dev-api/js-lib/number.md)

## uploadFile

Represents a file uploaded via the component. scripting type: CustomType\<servoyextra-multifileupload.uploadFile>

* error
  * Error message if the file upload failed.
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
* extension
  * The file extension (e.g. 'jpg', 'png').
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
* id
  * Unique identifier for the file.
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
* metaFields
  * Meta data fields associated with the file.
  * **Type**: [object](/reference/servoycore/dev-api/js-lib/object.md)
* name
  * The name of the file.
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
* progress
  * The progress object representing the file upload progress.
  * **Type**: [progress](#progress)
* type
  * The MIME type of the file.
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)

## 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\[\]](/reference/servoycore/dev-api/js-lib/string.md)
* maxFileSize
  * The maximum allowed file size in bytes.
  * **Type**: [long](/reference/servoycore/dev-api/js-lib/number.md)
  * **Default Value**: null
* maxNumberOfFiles
  * The maximum number of files that can be selected.
  * **Type**: [int](/reference/servoycore/dev-api/js-lib/number.md)
  * **Default Value**: null
* minNumberOfFiles
  * The minimum number of files that must be selected.
  * **Type**: [int](/reference/servoycore/dev-api/js-lib/number.md)
  * **Default Value**: null

***


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.servoy.com/reference/servoyextensions/ui-components/media/multifile-upload.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.