@spark-web/dropzone/README.md

--- title: Drop Zone isExperimentalPackage: true ---

---
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`](/package/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](https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker)
types accept option).

```jsx live
<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.

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

## Props

<PropsTable displayName="Dropzone" />