FileUploadDropZone

The FileUploadDropZone component allows users to upload files to a web application 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>
  <H3>The cyan area below is a FileUploadDropZone</H3>
  <FileUploadDropZone backgroundColor="cyan" height="100px"
    onUpload="
      (files) => {
        console.log(files); 
        files.map(file => toast('file ' + file.path + ' uploaded'))}" />
</App>

You can try it by dragging one or more files to the cyan surface. When you drop the file(s), the app triggers the upload event and displays a dialog for each file.

You can also paste files from the clipboard: click the drop zone (cyan area) and then use the keyboard shortcut set on your OS.

Properties

allowPaste (default: true)

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

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 backgroundColor="cyan" height="100px"
    allowPaste="false"
    onUpload="(files) => files.map(file => toast('file ' + file.path + ' uploaded'))" />
</App>

Try it! When you copy a file to a clipboard, you cannot paste it with the keyboard shortcut of your OS.

enabled (default: true)

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

text (default: "Drop files here")

With this property, you can change the default text to display when files are dragged over 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).

Each item passed in the event argument is an instance of File (opens in a new tab).

Exposed Methods

This component does not expose any methods.

Styling

You can use these properties to change the styling of the FileUpoadDropZone component:

• backgroundColor-FileUploadDropZone
• textColor-FileUploadDropZone
• backgroundColor-dropping-FileUploadDropZone
• opacity-dropping-FileUploadDropZone

The theme variables with the dropping tag set the background color attributes of the drop zone when you drag files over it.

Theme Variables