title: Drop Zone isExperimentalPackage: true

The Dropzone component lets users upload files by clicking on, or dragging and dropping onto the "drop zone". It can also be be triggered by clicking on the label.

Usage

Field

Each Dropzone must be accompanied by a Field with a label. Effective form labeling helps inform users which selection to make.

Examples

Accept

By providing an accept prop, we can make the Dropzone only accept certain file types.

The value must be an object with a common MIME type as keys and an array of file extensions as values (similar to showOpenFilePicker's types accept option).

<Stack gap="large">
  <Field label="Upload image" description="Accepts common image file formats">
    <Dropzone accept={{ 'image/*': ['.png', '.jpg'] }} />
  </Field>
  <Field label="Upload PDF" description="Only accepts PDF files">
    <Dropzone accept={{ 'application/pdf': '.pdf' }} />
  </Field>
</Stack>

Show Image Thumbnails

By default, once a file as been added to the Dropzone, a document icon will displayed next to the file name in the list below. If you have uploaded an image, you can use the showImageThumbnails to show an image preview instead.

<Field label="Upload image" description="Drop an image here to see a preview">
  <Dropzone accept={{ 'image/*': ['.png', '.jpg'] }} showImageThumbnails />
</Field>

Props