Dropzone

import { Canvas, Controls, Meta, Title } from '@storybook/addon-docs/blocks';

import * as DropzoneStories from './Dropzone.stories';

<Meta of={DropzoneStories} name='Usage' />

<Title />

## Purpose

A compact area to add files by dragging them in or by browsing, for example to attach an image or a brief to a request.

## Usage

- It is one line: an upload icon, the text "Drop an image or brief, or" and a **browse** button that opens the file dialog. Both halves of the sentence are props (`label`, `browseLabel`) so they can be translated.
- While a file is dragged over it, the outline turns solid and highlighted.
- `onFilesDrop` gets the files, from a drop or from the dialog. `accept` filters both, as on a file input; `multiple` allows more than one.
- The zone does not show the files. The screen owns the list (chips, previews, errors, upload progress): use the Chat Attachment for chips in a chat.
- Keyboard and screen readers use the **browse** button, which is a real button. Dropping is a pointer shortcut, as in the Chat Input.
- Not for a form field with a validation message and a chosen file name: use the PDS File Upload for that.

## Implementation

See the table below for the available props.

<hr />

<Canvas of={DropzoneStories.Default} />
<Controls of={DropzoneStories.Default} />