React Dropzone

https://react-dropzone.js.org/
Admin
React Dropzone is a simple React hook that creates HTML5-compliant drag-and-drop zones for file...
Tokens:12,581
Snippets:87
Trust Score:8.1
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Install react-dropzone with pnpm

Source: https://react-dropzone.js.org/guide/getting-started

Install react-dropzone with pnpm. The package ships as ESM and CommonJS with TypeScript types included, and lists react as a peer dependency (>= 18).

```bash
pnpm add react-dropzone
```

--------------------------------

### Basic useDropzone example

Source: https://react-dropzone.js.org/examples/basic

Basic usage of the useDropzone hook. Binds drag 'n' drop handlers via getRootProps() and click/keyboard input via getInputProps() on an <input>. Supports folder drag 'n' drop by default.

```jsx
import React from "react";
import {useDropzone} from "react-dropzone";
 
function Basic() {
  const {acceptedFiles, getRootProps, getInputProps} = useDropzone();
 
  const files = acceptedFiles.map(file => (
    <li key={file.path}>
      {file.path} - {file.size} bytes
    </li>
  ));
 
  return (
    <section className="container">
      <div {...getRootProps({className: "dropzone"})}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
      <aside>
        <h4>Files</h4>
        <ul>{files}</ul>
      </aside>
    </section>
  );
}
```

--------------------------------

### Install react-dropzone with yarn

Source: https://react-dropzone.js.org/guide/getting-started

Install react-dropzone with yarn. The package ships as ESM and CommonJS with TypeScript types included, and lists react as a peer dependency (>= 18).

```bash
yarn add react-dropzone
```

--------------------------------

### Install react-dropzone with npm

Source: https://react-dropzone.js.org/guide/getting-started

Install react-dropzone with npm. The package ships as ESM and CommonJS with TypeScript types included, and lists react as a peer dependency (>= 18).

```bash
npm install react-dropzone
```

--------------------------------

### Basic dropzone without JSX

Source: https://react-dropzone.js.org/examples/no-jsx

Use React.createElement to build a dropzone without JSX. The example uses useDropzone with onDrop callback to store files in state and renders the file list.

```javascript
import React, {useCallback, useState} from "react";
import {useDropzone} from "react-dropzone";
 
const e = React.createElement;
 
function Basic() {
  const [files, setFiles] = useState([]);
  const onDrop = useCallback(files => setFiles(files), [setFiles]);
  const {getRootProps, getInputProps} = useDropzone({onDrop});
 
  const fileList = files.map(file => e("li", {key: file.name}, `${file.name} - ${file.size} bytes`));
 
  return e("section", {className: "container"}, [
    e("div", getRootProps({className: "dropzone", key: "dropzone"}), [
      e("input", getInputProps({key: "input"})),
      e("p", {key: "desc"}, "Drag 'n' drop some files here, or click to select files")
    ]),
    e("aside", {key: "filesContainer"}, [e("h4", {key: "title"}, "Files"), e("ul", {key: "fileList"}, fileList)])
  ]);
}
```

--------------------------------

### Limit accepted files with useDropzone maxFiles prop

Source: https://react-dropzone.js.org/examples/max-files

Use the `maxFiles` prop on `useDropzone` to limit the number of accepted files. When more valid files are dropped than allowed, the first `maxFiles` are accepted and each surplus file is rejected with a `too-many-files` error. Files that fail their own checks (wrong type, out of `[minSize, maxSize]`, or custom `validator` error) are rejected with those errors and don't count toward the limit. The example sets `maxFiles: 2` and renders accepted and rejected file lists.

```jsx
function AcceptMaxFiles() {
  const {acceptedFiles, fileRejections, getRootProps, getInputProps} = useDropzone({maxFiles: 2});
 
  const acceptedFileItems = acceptedFiles.map(file => (
    <li key={file.path}>
      {file.path} - {file.size} bytes
    </li>
  ));
 
  const fileRejectionItems = fileRejections.map(({file, errors}) => (
    <li key={file.path}>
      {file.path} - {file.size} bytes
      <ul>
        {errors.map(e => (
          <li key={e.code}>{e.message}</li>
        ))}
      </ul>
    </li>
  ));
 
  return (
    <section className="container">
      <div {...getRootProps({className: "dropzone"})}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
        <em>(2 files are the maximum number of files you can drop here)</em>
      </div>
      <aside>
        <h4>Accepted files</h4>
        <ul>{acceptedFileItems}</ul>
        <h4>Rejected files</h4>
        <ul>{fileRejectionItems}</ul>
      </aside>
    </section>
  );
}
```

--------------------------------

### Restore full MIME-type table with COMMON_MIME_TYPES

Source: https://react-dropzone.js.org/examples/accept

Install file-selector and pass the full COMMON_MIME_TYPES table to fromEvent via getFilesFromEvent. Required only when matching purely by MIME type (e.g. image/*) against typeless sources from drag 'n' drop or File System Access.

```bash
npm install file-selector
```

```jsx
import {useDropzone} from "react-dropzone";
import {fromEvent} from "file-selector";
import {COMMON_MIME_TYPES} from "file-selector/mime";
 
function FullMimeCoverage() {
  const {getRootProps, getInputProps} = useDropzone({
    getFilesFromEvent: event => fromEvent(event, {mimeTypes: COMMON_MIME_TYPES})
  });
  // ...
}
```

--------------------------------

### Stop propagation manually with event.stopPropagation

Source: https://react-dropzone.js.org/examples/events

Provide your own `onDrop` handler that calls `event.stopPropagation()` to prevent the default dropzone behavior. In this example, nothing is logged on drop.

```jsx
<Dropzone onDrop={files => console.log(files)}>
  {({getRootProps, getInputProps}) => (
    <div {...getRootProps({className: "dropzone", onDrop: event => event.stopPropagation()})}>
      <input {...getInputProps()} />
    </div>
  )}
</Dropzone>
```

--------------------------------

### Open file dialog with useDropzone open method

Source: https://react-dropzone.js.org/examples/file-dialog

Use the `open` method returned by `useDropzone` to open the native file dialog. Set `noClick` and `noKeyboard` to disable default click and keyboard triggers. The button must have `type="button"` to avoid form submission.

```jsx
function DropzoneWithButton() {
  const {getRootProps, getInputProps, open} = useDropzone({
    noClick: true,
    noKeyboard: true
  });
 
  return (
    <div {...getRootProps({className: "dropzone"})}>
      <input {...getInputProps()} />
      <button type="button" onClick={open}>
        Open File Dialog
      </button>
    </div>
  );
}
```

--------------------------------

### Grouped accept types for File System Access picker

Source: https://react-dropzone.js.org/examples/accept

Pass accept as an array of {description, accept} entries to show separate filter rows in the File System Access picker. Only affects the FS Access picker; on the native input fallback, groups are flattened and descriptions dropped.

```javascript
const {getRootProps, getInputProps} = useDropzone({
  useFsAccessApi: true,
  accept: [
    {description: "Images", accept: {"image/jpeg": [".jpg", ".jpeg"], "image/png": []}},
    {description: "Documents", accept: {"application/pdf": [".pdf"]}}
  ]
});
```

--------------------------------

### Customize getFilesFromEvent to add properties to dropped files

Source: https://react-dropzone.js.org/examples/plugins

Customizes how dropped file-system objects are handled by providing a `getFilesFromEvent` function to `useDropzone`. The function must return a Promise with a list of `File` objects (or `DataTransferItem` of `{kind: 'file'}`). Use `Object.defineProperty()` to add custom properties to `File` objects so they pass through the internal filter.

```javascript
async function myCustomFileGetter(event) {
  const files = [];
  const fileList = event.dataTransfer ? event.dataTransfer.files : event.target.files;
 
  for (let i = 0; i < fileList.length; i++) {
    const file = fileList.item(i);
    Object.defineProperty(file, "myProp", {value: true});
    files.push(file);
  }
 
  return files;
}
 
function Plugin() {
  const {acceptedFiles, getRootProps, getInputProps} = useDropzone({
    getFilesFromEvent: event => myCustomFileGetter(event)
  });
  // ...render acceptedFiles, each with f.myProp
}
```

--------------------------------

### Select a directory with webkitdirectory in react-dropzone

Source: https://react-dropzone.js.org/examples/directory

Use this component to let users select a folder instead of a file picker. It passes the non-standard `webkitdirectory` attribute through `getInputProps`, and the browser recursively lists the folder's files with each file's relative path on `file.path`. Directory selection works only through the native `<input>`, so `useFsAccessApi` must be `false` (the default) because the File System Access API cannot select directories.

```jsx
function Directory() {
  const {acceptedFiles, getRootProps, getInputProps} = useDropzone();
  const files = acceptedFiles.map(file => (
    <li key={file.path}>
      {file.path} - {file.size} bytes
    </li>
  ));
  return (
    <section className="container">
      <div {...getRootProps({className: "dropzone"})}>
        <input {...getInputProps({webkitdirectory: "true"})} />
        <p>Drag 'n' drop a folder here, or click to select a folder</p>
      </div>
      <aside>
        <h4>Files</h4>
        <ul>{files}</ul>
      </aside>
    </section>
  );
}
```

--------------------------------

### Create file previews with URL.createObjectURL in onDrop

Source: https://react-dropzone.js.org/examples/previews

Since react-dropzone 7.0.0, File objects no longer include a preview property. Create previews manually in the onDrop callback using URL.createObjectURL and revoke them on image load and on unmount to avoid memory leaks.

```jsx
function Previews() {
  const [files, setFiles] = useState([]);
  const {getRootProps, getInputProps} = useDropzone({
    accept: {"image/*": []},
    onDrop: acceptedFiles => {
      setFiles(
        acceptedFiles.map(file =>
          Object.assign(file, {
            preview: URL.createObjectURL(file)
          })
        )
      );
    }
  });
 
  const thumbs = files.map(file => (
    <div key={file.name}>
      <img src={file.preview} onLoad={() => URL.revokeObjectURL(file.preview)} alt={file.name} />
    </div>
  ));
 
  useEffect(() => {
    // Revoke the data uris to avoid memory leaks on unmount
    return () => files.forEach(file => URL.revokeObjectURL(file.preview));
  }, [files]);
 
  return (
    <section className="container">
      <div {...getRootProps({className: "dropzone"})}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
      <aside>{thumbs}</aside>
    </section>
  );
}
```

--------------------------------

### Class component with <Dropzone>

Source: https://react-dropzone.js.org/examples/class-component

Use the <Dropzone> component in a class component. The onDrop handler stores files in state, and the render method maps them to a list. The component uses getRootProps and getInputProps to set up the dropzone area.

```jsx
import React, {Component} from "react";
import Dropzone from "react-dropzone";
 
class Basic extends Component {
  constructor() {
    super();
    this.onDrop = files => this.setState({files});
    this.state = {files: []};
  }
 
  render() {
    const files = this.state.files.map(file => (
      <li key={file.name}>
        {file.name} - {file.size} bytes
      </li>
    ));
 
    return (
      <Dropzone onDrop={this.onDrop}>
        {({getRootProps, getInputProps}) => (
          <section className="container">
            <div {...getRootProps({className: "dropzone"})}>
              <input {...getInputProps()} />
              <p>Drag 'n' drop some files here, or click to select files</p>
            </div>
            <aside>
              <h4>Files</h4>
              <ul>{files}</ul>
            </aside>
          </section>
        )}
      </Dropzone>
    );
  }
}
```

--------------------------------

### Style dropzone with inline styles using useMemo

Source: https://react-dropzone.js.org/examples/styling

Inline style approach for react-dropzone. Uses useMemo to merge base, focused, accept, and reject styles based on isFocused, isDragAccept, and isDragReject flags. The style object is passed to getRootProps({style}).

```jsx
const baseStyle = {/* ... */};
const focusedStyle = {borderColor: "#2196f3"};
const acceptStyle = {borderColor: "#00e676"};
const rejectStyle = {borderColor: "#ff1744"};
 
function StyledDropzone() {
  const {getRootProps, getInputProps, isFocused, isDragAccept, isDragReject} = useDropzone({
    accept: {"image/*": []}
  });
 
  const style = useMemo(
    () => ({
      ...baseStyle,
      ...(isFocused ? focusedStyle : {}),
      ...(isDragAccept ? acceptStyle : {}),
      ...(isDragReject ? rejectStyle : {})
    }),
    [isFocused, isDragAccept, isDragReject]
  );
 
  return (
    <div {...getRootProps({style})}>
      <input {...getInputProps()} />
      <p>Drag 'n' drop some files here, or click to select files</p>
    </div>
  );
}
```

--------------------------------

### Use useDropzone hook to create a drag 'n' drop zone

Source: https://react-dropzone.js.org/guide/getting-started

Use the useDropzone hook to bind drag 'n' drop handlers to any element. getRootProps() returns props for the root container, and getInputProps() returns props for the hidden input used for click/keyboard access. The onDrop callback receives accepted files as File objects; type handlers as File[] rather than FileWithPath[].

```jsx
import React from "react";
import {useDropzone} from "react-dropzone";
 
function MyDropzone() {
  const {getRootProps, getInputProps} = useDropzone({
    onDrop: acceptedFiles => {
      // Do something with the files, e.g. upload to a server
      console.log(acceptedFiles);
    }
  });
 
  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      <p>Drag 'n' drop some files here, or click to select files</p>
    </div>
  );
}
```

--------------------------------

### Open file dialog with Dropzone component ref

Source: https://react-dropzone.js.org/examples/file-dialog

Use the `ref` exposed by the `<Dropzone>` component to call `open()` on the ref. Set `noClick` and `noKeyboard` props to disable default triggers. The button must have `type="button"` to avoid form submission.

```tsx
import Dropzone, {DropzoneRef} from "react-dropzone";
 
function RefDropzone() {
  const dropzoneRef = useRef<DropzoneRef>(null);
  return (
    <Dropzone ref={dropzoneRef} noClick noKeyboard>
      {({getRootProps, getInputProps}) => (
        <div {...getRootProps({className: "dropzone"})}>
          <input {...getInputProps()} />
          <button type="button" onClick={() => dropzoneRef.current?.open()}>
            Open File Dialog
          </button>
        </div>
      )}
    </Dropzone>
  );
}
```

--------------------------------

### React component integrating Pintura editor with react-dropzone

Source: https://react-dropzone.js.org/examples/pintura

Uses the commercial pintura package. The editImage function opens the Pintura editor via openDefaultEditor() and attaches the original file and image state to the processed output. The component uses useDropzone to accept images, creates previews, and provides an Edit button that replaces the file with the edited version.

```javascript
import React, {useState, useEffect} from "react";
import {useDropzone} from "react-dropzone";
 
import "pintura/pintura.css";
import {openDefaultEditor} from "pintura";
 
// Called when the user taps the edit button: opens the editor and returns the modified file.
const editImage = (image, done) => {
  const imageFile = image.pintura ? image.pintura.file : image;
  const imageState = image.pintura ? image.pintura.data : {};
 
  const editor = openDefaultEditor({src: imageFile, imageState});
 
  editor.on("process", ({dest, imageState}) => {
    Object.assign(dest, {pintura: {file: imageFile, data: imageState}});
    done(dest);
  });
};
 
function App() {
  const [files, setFiles] = useState([]);
  const {getRootProps, getInputProps} = useDropzone({
    accept: {"image/*": []},
    onDrop: acceptedFiles => {
      setFiles(acceptedFiles.map(file => Object.assign(file, {preview: URL.createObjectURL(file)})));
    }
  });
 
  const thumbs = files.map((file, index) => (
    <div key={file.name}>
      <img src={file.preview} alt="" />
      <button
        onClick={() =>
          editImage(file, output => {
            const updatedFiles = [...files];
            updatedFiles[index] = output;
            if (file.preview) URL.revokeObjectURL(file.preview);
            Object.assign(output, {preview: URL.createObjectURL(output)});
            setFiles(updatedFiles);
          })
        }
      >
        Edit
      </button>
    </div>
  ));
 
  useEffect(
    () => () => {
      files.forEach(file => URL.revokeObjectURL(file.preview));
    },
    [files]
  );
 
  return (
    <section className="container">
      <div {...getRootProps({className: "dropzone"})}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
      <aside>{thumbs}</aside>
    </section>
  );
}
 
export default App;
```

--------------------------------

### Tauri v1 config: disable native file drop (fileDropEnabled: false)

Source: https://react-dropzone.js.org/guide/tauri

Set tauri.windows[].fileDropEnabled to false in tauri.conf.json to let the webview handle HTML5 drag-and-drop events, making react-dropzone work without code changes. This is required for HTML5 drag-and-drop on Windows. Trade-off: you lose absolute file paths.

```json
{
  "tauri": {
    "windows": [
      {
        "fileDropEnabled": false
      }
    ]
  }
}
```

--------------------------------

### Accept only JPEG and PNG images with react-dropzone

Source: https://react-dropzone.js.org/examples/accept

Use the `accept` prop with MIME types `image/jpeg` and `image/png` to restrict file selection. The component displays accepted files and rejection errors. Note that wildcard MIME types like `image/*` can be paired with extensions to narrow down, and an empty array accepts all files of that type.

```jsx
function Accept() {
  const {acceptedFiles, fileRejections, getRootProps, getInputProps} = useDropzone({
    accept: {"image/jpeg": [], "image/png": []}
  });
 
  const acceptedFileItems = acceptedFiles.map(file => (
    <li key={file.path}>
      {file.path} - {file.size} bytes
    </li>
  ));
 
  const fileRejectionItems = fileRejections.map(({file, errors}) => (
    <li key={file.path}>
      {file.path} - {file.size} bytes
      <ul>
        {errors.map(e => (
          <li key={e.code}>{e.message}</li>
        ))}
      </ul>
    </li>
  ));
 
  return (
    <section className="container">
      <div {...getRootProps({className: "dropzone"})}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
        <em>(Only *.jpeg and *.png images will be accepted)</em>
      </div>
      <aside>
        <h4>Accepted files</h4>
        <ul>{acceptedFileItems}</ul>
        <h4>Rejected files</h4>
        <ul>{fileRejectionItems}</ul>
      </aside>
    </section>
  );
}
```

--------------------------------

### Tauri v2: listen to onDragDropEvent and read absolute file paths

Source: https://react-dropzone.js.org/guide/tauri

Keep dragDropEnabled at its default (true) and use getCurrentWebviewWindow().onDragDropEvent() to receive absolute paths. Read each path into a File with the fs plugin, then manage the files in your own React state. The drag-active UI must be derived from the enter/over/leave payload types because DOM drag events never fire.

```javascript
import {getCurrentWebviewWindow} from "@tauri-apps/api/webviewWindow";
import {readFile} from "@tauri-apps/plugin-fs";
 
const webview = getCurrentWebviewWindow();
 
const unlisten = await webview.onDragDropEvent(async event => {
  // event.payload.type is "enter" | "over" | "drop" | "leave"
  if (event.payload.type === "drop") {
    const files = await Promise.all(
      event.payload.paths.map(async path => {
        const bytes = await readFile(path);
        const name = path.split(/[\\/]/).pop() ?? path;
        return new File([bytes], name);
      })
    );
 
    // Hand `files` to your own state, or validate them with react-dropzone's
    // getFilesFromEvent / the same accept/size rules you pass to useDropzone.
  }
});
```

--------------------------------

### Async image dimensions validator

Source: https://react-dropzone.js.org/examples/validator

Define an async validator that checks image width using `createImageBitmap`. It returns an error object if the image is narrower than 250px, or `null` to accept. The `isProcessing` flag is true while the validator runs, and `onError` is called if the validator throws or rejects.

```javascript
async function imageDimensionsValidator(file) {
  const bitmap = await createImageBitmap(file);
  if (bitmap.width < 250) {
    return {code: "too-narrow", message: "Image must be at least 250px wide"};
  }
  return null;
}
 
function AsyncValidation() {
  const {getRootProps, getInputProps, isProcessing} = useDropzone({
    validator: imageDimensionsValidator,
    accept: {"image/*": []},
    onError: err => console.error(err)
  });
 
  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      <p>{isProcessing ? "Validating…" : "Drag 'n' drop some images here"}</p>
    </div>
  );
}
```

--------------------------------

### validator prop (async)

Source: https://react-dropzone.js.org/examples/validator

Async validation for files via the `validator` prop. The validator can return a Promise for checks that can't run synchronously.

```APIDOC
## [PROP] validator (async)

### Description
The `validator` may be `async` (return a `Promise`) for checks that can't run synchronously - reading image dimensions or video duration, inspecting file contents with a library like `file-type`, or calling an external service. Resolve with `null` to accept the file, or an error object / array to reject it.

### Usage
Pass an async function to the `validator` prop of `useDropzone`.

### Parameters
- **file** (File) - Required - The file to validate.

### Return Value
- A `Promise` that resolves to `null` if the file should be accepted.
- A `Promise` that resolves to an error object with `code` and `message` fields, or an array of such objects, if the file should be rejected.

### Example
```js
async function imageDimensionsValidator(file) {
  const bitmap = await createImageBitmap(file);
  if (bitmap.width < 250) {
    return {code: "too-narrow", message: "Image must be at least 250px wide"};
  }
  return null;
}
```
```

--------------------------------

### React to drag with MIME types

Source: https://react-dropzone.js.org/examples/accept

Use MIME types (e.g. image/*) to react with isDragAccept/isDragReject during drag, since file names/extensions aren't readable. MIME type determination is not reliable across platforms.

```javascript
const {isDragActive, isDragAccept, isDragReject, getRootProps, getInputProps} = useDropzone({
  accept: {"image/*": [".jpeg", ".png"]}
});
```

--------------------------------

### Tauri v2 config: disable native drag-and-drop (dragDropEnabled: false)

Source: https://react-dropzone.js.org/guide/tauri

Set app.windows[].dragDropEnabled to false in tauri.conf.json to let the webview handle HTML5 drag-and-drop events, making react-dropzone work without code changes. This is required for HTML5 drag-and-drop on Windows. Trade-off: you lose absolute file paths.

```json
{
  "app": {
    "windows": [
      {
        "dragDropEnabled": false
      }
    ]
  }
}
```

--------------------------------

### DragOverlay component using isDragGlobal

Source: https://react-dropzone.js.org/examples/drag-overlay

React component using useDropzone with isDragGlobal, isDragActive, isDragAccept, and isDragReject states. Shows a full-page overlay when dragging globally but not over the dropzone, and displays contextual messages. isDragGlobal resets to false when the drag leaves the document, files are dropped anywhere, or the drag is cancelled (ESC).

```jsx
function DragOverlay() {
  const {getRootProps, getInputProps, isDragGlobal, isDragActive, isDragAccept, isDragReject} = useDropzone({
    accept: {"image/*": [".png", ".jpg", ".jpeg", ".gif"]}
  });
 
  return (
    <div>
      {isDragGlobal && !isDragActive && <div className="overlay">Drop files anywhere on this page...</div>}
      <div {...getRootProps({className: "dropzone"})}>
        <input {...getInputProps()} />
        {isDragGlobal && !isDragActive && <p>🌐 Drag detected on page!</p>}
        {isDragAccept && <p>✅ Drop to upload these files</p>}
        {isDragReject && <p>❌ Some files will be rejected</p>}
      </div>
    </div>
  );
}
```

--------------------------------

### Style dropzone with styled-components

Source: https://react-dropzone.js.org/examples/styling

Styled-components approach for react-dropzone. Defines a getColor helper that returns a border color based on drag state, and a styled Container that uses it. The state flags are passed to getRootProps({isFocused, isDragAccept, isDragReject}).

```jsx
import styled from "styled-components";
 
const getColor = props => {
  if (props.isDragAccept) return "#00e676";
  if (props.isDragReject) return "#ff1744";
  if (props.isFocused) return "#2196f3";
  return "#eeeeee";
};
 
const Container = styled.div`
  /* ... */
  border-color: ${props => getColor(props)};
`;
 
function StyledDropzone() {
  const {getRootProps, getInputProps, isFocused, isDragAccept, isDragReject} = useDropzone({
    accept: {"image/*": []}
  });
  return (
    <Container {...getRootProps({isFocused, isDragAccept, isDragReject})}>
      <input {...getInputProps()} />
      <p>Drag 'n' drop some files here, or click to select files</p>
    </Container>
  );
}
```

--------------------------------

### Disable keyboard events with noKeyboard

Source: https://react-dropzone.js.org/examples/events

Set `noKeyboard: true` to disable SPACE/ENTER and focus handling on the dropzone.

```jsx
const {getRootProps, getInputProps} = useDropzone({noKeyboard: true});
```

--------------------------------

### Disabled dropzone with useDropzone({disabled: true})

Source: https://react-dropzone.js.org/examples/basic

Disables the dropzone by passing the disabled property to useDropzone. The dropzone will not accept files when disabled is true.

```jsx
const {getRootProps, getInputProps} = useDropzone({disabled: true});
```

--------------------------------

### validator prop

Source: https://react-dropzone.js.org/examples/validator

Custom validation for files via the `validator` prop. It must return `null` to accept a file, or an error object/array to reject it.

```APIDOC
## [PROP] validator

### Description
Specifies custom validation for files. It must return `null` if the file should be accepted, or an error object / array of error objects if it should be rejected.

### Usage
Pass a function to the `validator` prop of `useDropzone`.

### Parameters
- **file** (File) - Required - The file to validate.

### Return Value
- `null` if the file should be accepted.
- An error object with `code` and `message` fields, or an array of such objects, if the file should be rejected.

### Example
```js
const maxLength = 20;

function nameLengthValidator(file) {
  if (file.name.length > maxLength) {
    return {
      code: "name-too-large",
      message: `Name is larger than ${maxLength} characters`
    };
  }
  return null;
}
```
```

--------------------------------

### Synchronous name length validator

Source: https://react-dropzone.js.org/examples/validator

Define a validator that rejects files with names longer than 20 characters. The validator returns an error object with code 'name-too-large' and a message, or `null` to accept. Pass it to `useDropzone` via the `validator` prop.

```javascript
const maxLength = 20;
 
function nameLengthValidator(file) {
  if (file.name.length > maxLength) {
    return {
      code: "name-too-large",
      message: `Name is larger than ${maxLength} characters`
    };
  }
  return null;
}
 
function CustomValidation() {
  const {acceptedFiles, fileRejections, getRootProps, getInputProps} = useDropzone({
    validator: nameLengthValidator
  });
  // ...render accepted/rejected lists
}
```

--------------------------------

### Override error messages with getErrorMessage

Source: https://react-dropzone.js.org/examples/validator

Use the `getErrorMessage` prop to localize built-in rejection messages. It receives the error and file, and returns a replacement message. Return `error.message` for codes you don't want to change.

```javascript
function LocalizedDropzone() {
  const {getRootProps, getInputProps} = useDropzone({
    maxSize: 1024,
    getErrorMessage: (error, file) => {
      switch (error.code) {
        case "file-too-large":
          return `${file.name} dépasse la taille maximale`;
        case "too-many-files":
          return "Trop de fichiers";
        default:
          return error.message;
      }
    }
  });
  // ...
}
```

--------------------------------

### Declare webkitdirectory attribute for TypeScript

Source: https://react-dropzone.js.org/examples/directory

Add this module augmentation to your own project (e.g. in a `react-app-env.d.ts`) because React's built-in types don't declare `webkitdirectory`. Declare it once globally rather than using a cast; react-dropzone deliberately doesn't ship this augmentation to avoid clashing with other declarations of the same attribute.

```typescript
import "react";
 
declare module "react" {
  interface InputHTMLAttributes<T> {
    webkitdirectory?: string;
  }
}
```

--------------------------------

### DropzoneField component with hidden file input for form submission

Source: https://react-dropzone.js.org/examples/forms

Use this component to integrate react-dropzone with a form. It sets the hidden input's files using a DataTransfer object, and the button opens the file dialog without submitting the form because of type="button".

```jsx
function DropzoneField({required, name}) {
  const hiddenInputRef = useRef(null);
 
  const {getRootProps, getInputProps, open} = useDropzone({
    onDrop: incomingFiles => {
      if (hiddenInputRef.current) {
        // https://stackoverflow.com/a/68182158/1068446
        const dataTransfer = new DataTransfer();
        incomingFiles.forEach(v => dataTransfer.items.add(v));
        hiddenInputRef.current.files = dataTransfer.files;
      }
    }
  });
 
  return (
    <div {...getRootProps({className: "dropzone"})}>
      <input type="file" name={name} required={required} style={{opacity: 0}} ref={hiddenInputRef} />
      <input {...getInputProps()} />
      <button type="button" onClick={open}>
        Open File Dialog
      </button>
    </div>
  );
}
```

--------------------------------

### isDragUnknown with custom validator

Source: https://react-dropzone.js.org/examples/accept

Custom validators are not run during drag; while a validator is configured and built-in checks pass, drag state is isDragUnknown. A confidently wrong MIME type or multiple/maxFiles violation still yields isDragReject.

```javascript
const {isDragAccept, isDragReject, isDragUnknown, getRootProps, getInputProps} = useDropzone({
  validator: myValidator
});
 
// isDragUnknown === true  → "these files might be rejected on drop"
```

--------------------------------

### Prevent drag event bubbling with noDragEventsBubbling

Source: https://react-dropzone.js.org/examples/events

Use `noDragEventsBubbling: true` on the inner dropzone to prevent drag events from bubbling to the parent. The outer `onDrop` is never invoked when dropping on the inner dropzone.

```jsx
function InnerDropzone() {
  const {getRootProps} = useDropzone({noDragEventsBubbling: true});
  return (
    <div {...getRootProps({className: "dropzone"})}>
      <p>Inner dropzone</p>
    </div>
  );
}
 
function OuterDropzone() {
  const {getRootProps} = useDropzone({onDrop: files => console.log(files)});
  return (
    <div className="container">
      <div {...getRootProps({className: "dropzone"})}>
        <InnerDropzone />
        <p>Outer dropzone</p>
      </div>
    </div>
  );
}
```

--------------------------------

### getErrorMessage prop

Source: https://react-dropzone.js.org/examples/validator

Overrides built-in rejection messages via the `getErrorMessage` prop. It is called once per error with the error and the file, and its return value replaces the message.

```APIDOC
## [PROP] getErrorMessage

### Description
Overrides the built-in rejection messages (`file-invalid-type`, `file-too-large`, `file-too-small`, `too-many-files`) - e.g. to localize. It's called once per error with the error and the file it belongs to, and its return value replaces the message. Return `error.message` for codes you don't want to change (this also applies to your own `validator` errors).

### Usage
Pass a function to the `getErrorMessage` prop of `useDropzone`.

### Parameters
- **error** (object) - Required - The error object with a `code` and `message`.
- **file** (File) - Required - The file associated with the error.

### Return Value
- A string to replace the error message.

### Example
```js
function LocalizedDropzone() {
  const {getRootProps, getInputProps} = useDropzone({
    maxSize: 1024,
    getErrorMessage: (error, file) => {
      switch (error.code) {
        case "file-too-large":
          return `${file.name} dépasse la taille maximale`;
        case "too-many-files":
          return "Trop de fichiers";
        default:
          return error.message;
      }
    }
  });
  // ...
}
```
```

--------------------------------

### Disable click events with noClick

Source: https://react-dropzone.js.org/examples/events

Set `noClick: true` to disable the default click behavior of the dropzone.

```jsx
const {getRootProps, getInputProps} = useDropzone({noClick: true});
```

--------------------------------

### Disable drag events with noDrag

Source: https://react-dropzone.js.org/examples/events

Set `noDrag: true` to disable drag 'n' drop functionality.

```jsx
const {getRootProps, getInputProps} = useDropzone({noDrag: true});
```
Tokens:
Raw