Using with Tauri (desktop apps)

Inside a Tauri webview, dragging a file onto the window does not fire the browser's dragenter/dragover/drop events by default, so a react-dropzone dropzone appears to ignore drops. This is not a bug in react-dropzone: Tauri's native window layer intercepts OS file drops before the webview sees them and emits its own events instead. This has been the behaviour since the early betas (tauri-apps/tauri#2768).

You have two options, depending on whether you need the real filesystem paths of dropped files.

Recommended: let the webview handle drops

Disable Tauri's native drag-and-drop handling. Once it's off, standard HTML5 drag-and-drop events flow to the webview and react-dropzone works with no code changes - drag state, onDrop, validation, everything. Disabling it is also required to use HTML5 drag-and-drop on Windows.

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

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

If you need absolute file paths: keep native handling on

Keep dragDropEnabled at its default (true) and listen to Tauri's own drag-and-drop event, which hands you the absolute paths. Read each path into a File with the fs plugin, then run it through your own validation or react-dropzone's getFilesFromEvent helper. In this mode react-dropzone is only driving the click-to-open picker and your styling - the drop itself and the drag-active state are yours to manage, since the DOM drag events never fire.

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.
  }
});

Version notes

Tauri renamed the config flag and the events between v1 and v2:

Both default to enabled. Setting the flag to false is what lets react-dropzone handle drops itself.

References

• Tauri config reference - dragDropEnabled
• Tauri drag-and-drop discussion (v1/v2)
• tauri-apps/tauri#2768 - original "no support for dropping files?"