# FileDropZone

```tsx
import {
  unstable_FileDropZone as FileDropZone,
  type DropZoneFileRejection,
} from '@gravity-ui/uikit/unstable';
```

### Basic Usage

```tsx
const accept = ['image/*'];
const handleUpdate = (acceptedItems: File[], rejectedItems: DropZoneFileRejection[]) => {
  // Do something with accepted and rejected files.
};

<FileDropZone accept={accept} onUpdate={handleUpdate} />;
```

### Custom Texts And Icons

```tsx
import {DatabaseFill, HeartCrack} from '@gravity-ui/icons';

const accept = ['image/*'];
const handleUpdateAccepted = (files: File[]) => {
  // Do something with files.
};

<FileDropZone
  accept={accept}
  onUpdateAccepted={handleUpdateAccepted}
  title="Lorem ipsum dolor sit amet"
  description="Duis consequat commodo eros sit"
  buttonText="Upload"
  icon={DatabaseFill}
  errorIcon={HeartCrack}
/>;
```

### Custom Layout

The Compound Component pattern allows rendering of an arbitrary layout. All props are passed only to the parent and shared via React context, while the subcomponents can only receive a `className`.

```tsx
const accept = ['image/*'];
const handleUpdateAccepted = (files: File[]) => {
  // Do something with files.
};

<FileDropZone
  accept={accept}
  onUpdateAccepted={handleUpdateAccepted}
  title="Lorem ipsum dolor sit amet"
  description="Duis consequat commodo eros sit"
  buttonText="Upload"
  icon={DatabaseFill}
  errorIcon={HeartCrack}
>
  <div
    style={{
      flexGrow: '1',
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
    }}
  >
    <div
      style={{
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        gap: '32px',
      }}
    >
      <FileDropZone.Icon className={iconClassName} />
      <div style={{display: 'flex', flexDirection: 'column', alignItems: 'flex-start'}}>
        <FileDropZone.Title className={titleClassName} />
        <FileDropZone.Description className={descriptionClassName} />
      </div>
    </div>
    <div style={{marginLeft: '16px'}}>
      <FileDropZone.Button className={buttonClassName} />
    </div>
  </div>
</FileDropZone>;
```

## Properties

| Name             | Description                                                                                                                                              |                                   Type                                    |                                                     Default                                                      |
| :--------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------- | :-----------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------: |
| accept           | A list of MIME types for allowed files. Supports exact MIME types and top-level wildcards, e.g. `image/*`. An empty list accepts all dropped file types. |                                `string[]`                                 |                                                       `[]`                                                       |
| onUpdate         | A callback invoked when files are added. Receives accepted and rejected files in a single call                                                           | `(acceptedItems: File[], rejectedItems: DropZoneFileRejection[]) => void` |                                                                                                                  |
| onUpdateAccepted | A callback invoked when accepted files are added                                                                                                         |                         `(items: File[]) => void`                         |                                                                                                                  |
| onUpdateRejected | A callback invoked with rejected files: dropped files with a wrong MIME type and files beyond the first one in single-file mode                          |                `(items: DropZoneFileRejection[]) => void`                 |                                                                                                                  |
| title            | A title displayed under the icon                                                                                                                         |                                 `string`                                  | `"Drag the file here or select it"` (`multiple=false`); `"Drag the files here or select them"` (`multiple=true`) |
| description      | A description displayed under the title                                                                                                                  |                                 `string`                                  |                                                                                                                  |
| buttonText       | An upload button label                                                                                                                                   |                                 `string`                                  |                     `"Select a file"` (`multiple=false`); `"Select files"` (`multiple=true`)                     |
| icon             | A custom icon component from `@gravity-ui/icons`. When null is passed, the icon is not rendered                                                          |                       `@gravity-ui/icons/IconData`                        |                                                                                                                  |
| errorIcon        | A custom error icon component from `@gravity-ui/icons`. When null is passed, the error icon is not rendered                                              |                       `@gravity-ui/icons/IconData`                        |                                                                                                                  |
| className        | A root element className                                                                                                                                 |                                 `string`                                  |                                                                                                                  |
| multiple         | A boolean value that determines whether multiple files can be uploaded. When `false`, only one file is accepted                                          |                                 `boolean`                                 |                                                     `false`                                                      |
| disabled         | A boolean value that determines whether file uploading is disabled                                                                                       |                                 `boolean`                                 |                                                                                                                  |
| errorMessage     | An error message. If provided, error styles are also rendered                                                                                            |                                 `string`                                  |                                                                                                                  |
| validationState  | Validation state. If set to `"invalid"`, error styles are rendered                                                                                       |                                `"invalid"`                                |                                                                                                                  |
| children         | Custom layout content. The compound subcomponents `FileDropZone.Icon`, `Title`, `Description`, and `Button` can be used only inside `FileDropZone`       |                             `React.ReactNode`                             |                                                                                                                  |