FileUploadDropZone

FileUploadDropZone enables users to upload files by dragging and dropping files from their local file system onto a designated area within the UI.

Using FileUploadDropZone

The component provides a surface on which you can drag files or paste files from the clipboard. The following example demonstrates how to use the component.

<App>
  <FileUploadDropZone
    height="100px"
    onUpload="
      (files) => {
        console.log(files); 
        files.map(file => toast('file ' + file.path + ' uploaded'))}" />
</App>

<App>
  <FileUploadDropZone
    height="100px"
    onUpload="
      (files) => {
        console.log(files); 
        files.map(file => toast('file ' + file.path + ' uploaded'))}" />
</App>

Behaviors

This component supports the following behaviors:

Properties

acceptedFileTypes

Accepted file MIME types, separated by commas. For example: 'image/*,application/pdf'.

allowPaste

default: false

This property indicates if the drop zone accepts files pasted from the clipboard (true) or only dragged files (false). By default, paste-triggered uploads are disabled to prevent unexpected upload dialogs when users paste text into inputs within the drop zone. When enabled, paste events originating from text inputs and editable elements are still ignored.

This property indicates if the drop zone accepts files pasted from the clipboard (true) or only dragged files (false).

The following example sets this property to false and, thus, it turns off pasting files:

<App>
  <H3>You cannot paste files from the clipboard</H3>
  <FileUploadDropZone
    height="100px"
    allowPaste="false"
    onUpload="(files) => files.map(file => toast('file ' + file.path + ' uploaded'))" />
</App>

<App>
  <H3>You cannot paste files from the clipboard</H3>
  <FileUploadDropZone
    height="100px"
    allowPaste="false"
    onUpload="(files) => files.map(file => toast('file ' + file.path + ' uploaded'))" />
</App>

enabled

default: true

If set to false, the drop zone will be disabled and users will not be able to upload files.

icon

default: "upload"

Specifies an icon name. The framework will render an icon if XMLUI recognizes the icon by its name.

maxFiles

The maximum number of files that can be selected.

text

default: "Drop files here"

With this property, you can change the default text to display in the drop zone.

Events

upload

This component accepts files for upload but does not perform the actual operation. It fires the upload event and passes the list files to upload in the method's argument. You can use the passed file information to implement the upload (according to the protocol your backend supports).

Signature: upload(files: File[]): void

• files: An array of File objects to be uploaded.

Each item passed in the event argument is an instance of File.

Exposed Methods

This component does not expose any methods.

Styling

Theme Variables