Overview

File Upload Dropzone component allows users to upload content from their computer or device into the application by dragging a file (or files) into a target zone.

Example

For a styled drag 'n' drop zone for uploading files use the <FileUploadDropZone> component with an id. The callback function onFiles fires when the files are added and it contains files along with the current error value.
Uploaded files are validated using the input from props multiple, maxFileCount and maxTotalFileSizeBytes and an appropriate error message is displayed if any validation fails.

FileUploadDropZone component uses modus icons, refer to Getting Started page on how to enable them.

Custom validation

By providing validator prop custom validation can be added as shown in the example. The function accepts FileList object and it should return null or the error message. The default validation will be disabled while using validator.
Note: Below example shows the custom validation logic to verify single file upload.

Accessibility

User can interact with File Upload Dropzone through keyboard using the tab key (or shift + tab when tabbing backwards). When the drop zone or browse link is in focus, pressing the enter/return or space keys will open the default file picker.

API

FileUploadDropZone

import FileUploadDropZone from `@trimbleinc/modus-react-bootstrap/FileUploadDropZone`
NameTypeDefaultDescription
accept
string

A string that defines the file types the file input should accept. This string is a comma-separated list of unique file type specifiers. (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept)

disabled
boolean
id required
string

A HTML id attribute, necessary for proper form accessibility.

maxFileCount
number

Maximum number of files can be uploaded.

maxTotalFileSizeBytes
number

Maximum Total size of the files uploaded.

multiple
boolean

Enable multiple files upload.

onDragEnter
function

Callback for when the dragenter event occurs.

function onDragEnter(event: React.SyntheticEvent) => void
onDragLeave
function

Callback for when the dragleave event occurs.

function onDragLeave(event: React.SyntheticEvent) => void
onDragOver
function

Callback for when the dragover event occurs.

function onDragLeave(event: React.SyntheticEvent) => void
onFiles
function

Callback when files are being uploaded through drag & drop or browse button.

function onFiles(files: FileList, err: string) => void
 files: (https://developer.mozilla.org/en-US/docs/Web/API/FileList)
uploadIcon
boolean | element

Set a custom upload icon or disable it.

validator
function

Custom validation function. It must return null if there's no errors.

function validator(files: FileList) => string
 files: (https://developer.mozilla.org/en-US/docs/Web/API/FileList)