react-dropzone 14.3.8 → 14.4.0

package/examples/drag-overlay/README.md

@@ -0,0 +1,132 @@
+# isDragGlobal Example
+
+The `isDragGlobal` state is `true` when files are being dragged anywhere on the document, before they reach the dropzone. This allows you to show visual feedback (like a full-page overlay) to indicate where files can be dropped.
+
+## Simple Example
+
+```jsx harmony
+import React from 'react';
+import {useDropzone} from 'react-dropzone';
+
+function DragOverlay() {
+  const {
+    getRootProps,
+    getInputProps,
+    isDragGlobal,
+    isDragActive,
+    isDragAccept,
+    isDragReject,
+    acceptedFiles
+  } = useDropzone({
+    accept: {
+      'image/*': ['.png', '.jpg', '.jpeg', '.gif']
+    }
+  });
+
+  const files = acceptedFiles.map(file => (
+    <li key={file.path}>
+      {file.path} - {file.size} bytes
+    </li>
+  ));
+
+  return (
+    <div style={{ minHeight: '100vh', padding: '20px' }}>
+      {/* Global overlay shown when dragging anywhere on the page */}
+      {isDragGlobal && !isDragActive && (
+        <div style={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: 'rgba(0, 123, 255, 0.1)',
+          border: '3px dashed #007bff',
+          pointerEvents: 'none',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          zIndex: 1000,
+        }}>
+          <h2 style={{ color: '#007bff' }}>Drop files anywhere on this page...</h2>
+        </div>
+      )}
+
+      <section className="container">
+        <div {...getRootProps({
+          className: 'dropzone',
+          style: {
+            border: '2px dashed #ccc',
+            borderRadius: '8px',
+            padding: '40px',
+            textAlign: 'center',
+            backgroundColor: isDragAccept ? '#d4edda' : isDragReject ? '#f8d7da' : 'white',
+            transition: 'all 0.2s',
+          }
+        })}>
+          <input {...getInputProps()} />
+          
+          {/* Status indicators */}
+          {isDragGlobal && !isDragActive && (
+            <p style={{ color: '#007bff', fontWeight: 'bold' }}>
+              🌐 Drag detected on page!
+            </p>
+          )}
+          
+          {isDragActive && !isDragAccept && !isDragReject && (
+            <p style={{ color: '#6c757d' }}>Drop files here...</p>
+          )}
+          
+          {isDragAccept && (
+            <p style={{ color: '#28a745', fontWeight: 'bold' }}>
+              ✅ Drop to upload these files
+            </p>
+          )}
+          
+          {isDragReject && (
+            <p style={{ color: '#dc3545', fontWeight: 'bold' }}>
+              ❌ Some files will be rejected
+            </p>
+          )}
+          
+          {!isDragGlobal && !isDragActive && (
+            <p>Drag 'n' drop images here, or click to select files</p>
+          )}
+        </div>
+
+        <aside>
+          <h4>Accepted files</h4>
+          <ul>{files}</ul>
+        </aside>
+      </section>
+    </div>
+  );
+}
+
+<DragOverlay />
+```
+
+## State Transitions
+
+The `isDragGlobal` state provides early feedback about drag operations:
+
+1. **`isDragGlobal: false`** - No drag operation detected
+2. **`isDragGlobal: true`** - Files are being dragged anywhere on the document
+   - This is set when `dragenter` fires on the document with files
+3. **`isDragActive: true`** - Files are being dragged over the dropzone
+   - Takes precedence when you want to show different feedback
+4. **`isDragAccept: true`** / **`isDragReject: true`** - Files are validated
+   - Indicates whether the dragged files meet the dropzone criteria
+
+## Use Cases
+
+- **Full-page overlays**: Show a visual indicator across the entire page when drag starts
+- **Multi-dropzone highlighting**: Highlight all available dropzones when files are detected
+- **Early user feedback**: Provide immediate visual feedback before users reach the target dropzone
+- **Improved UX**: Make it clear that the application accepts drag and drop
+
+## Events
+
+`isDragGlobal` is reset to `false` when:
+- Drag leaves the document (`dragleave` on all elements)
+- Files are dropped anywhere (`drop` event)
+- Drag operation is cancelled (`dragend` event, e.g., user presses ESC)

package/package.json

@@ -144,6 +144,11 @@
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-node-resolve": "^13.1.3",
+    "@semantic-release/changelog": "^6.0.0",
+    "@semantic-release/commit-analyzer": "^12.0.0",
+    "@semantic-release/github": "^10.0.0",
+    "@semantic-release/npm": "^13.1.3",
+    "@semantic-release/release-notes-generator": "^14.1.0",
     "@size-limit/preset-small-lib": "^7.0.5",
     "@size-limit/webpack": "^7.0.5",
     "@size-limit/webpack-why": "^7.0.5",
@@ -183,6 +188,7 @@
     "rimraf": "^3.0.2",
     "rollup": "^2.66.1",
     "rollup-plugin-terser": "^7.0.2",
+    "semantic-release": "^25.0.2",
     "size-limit": "^7.0.5",
     "style-loader": "^3.3.1",
     "styled-components": "^5.3.3",
@@ -191,7 +197,7 @@
     "webpack-blocks": "^2.1.0"
   },
   "typings": "typings/react-dropzone.d.ts",
-  "version": "14.3.8",
+  "version": "14.4.0",
   "engines": {
     "node": ">= 10.13"
   },

package/src/index.js

@@ -86,6 +86,7 @@ Dropzone.propTypes = {
    * @param {boolean} params.isDragActive Active drag is in progress
    * @param {boolean} params.isDragAccept Dragged files are accepted
    * @param {boolean} params.isDragReject Some dragged files are rejected
+   * @param {boolean} params.isDragGlobal Files are being dragged anywhere on the document
    * @param {File[]} params.acceptedFiles Accepted files
    * @param {FileRejection[]} params.fileRejections Rejected files and why they were rejected
    */
@@ -323,6 +324,7 @@ export default Dropzone;
  * @property {boolean} isDragActive Active drag is in progress
  * @property {boolean} isDragAccept Dragged files are accepted
  * @property {boolean} isDragReject Some dragged files are rejected
+ * @property {boolean} isDragGlobal Files are being dragged anywhere on the document
  * @property {File[]} acceptedFiles Accepted files
  * @property {FileRejection[]} fileRejections Rejected files and why they were rejected
  */
@@ -342,6 +344,7 @@ const initialState = {
   isDragActive: false,
   isDragAccept: false,
   isDragReject: false,
+  isDragGlobal: false,
   acceptedFiles: [],
   fileRejections: [],
 };
@@ -508,6 +511,7 @@ export function useDropzone(props = {}) {
   }, [inputRef, isFileDialogActive, onFileDialogCancelCb, fsAccessApiWorksRef]);
 
   const dragTargetsRef = useRef([]);
+  const globalDragTargetsRef = useRef([]);
   const onDocumentDrop = (event) => {
     if (rootRef.current && rootRef.current.contains(event.target)) {
       // If we intercepted an event for our instance, let it propagate down to the instance's onDrop handler
@@ -531,6 +535,55 @@ export function useDropzone(props = {}) {
     };
   }, [rootRef, preventDropOnDocument]);
 
+  // Track global drag state for document-level drag events
+  useEffect(() => {
+    const onDocumentDragEnter = (event) => {
+      globalDragTargetsRef.current = [
+        ...globalDragTargetsRef.current,
+        event.target,
+      ];
+
+      if (isEvtWithFiles(event)) {
+        dispatch({ isDragGlobal: true, type: "setDragGlobal" });
+      }
+    };
+
+    const onDocumentDragLeave = (event) => {
+      // Only deactivate once we've left all children
+      globalDragTargetsRef.current = globalDragTargetsRef.current.filter(
+        (el) => el !== event.target && el !== null
+      );
+
+      if (globalDragTargetsRef.current.length > 0) {
+        return;
+      }
+
+      dispatch({ isDragGlobal: false, type: "setDragGlobal" });
+    };
+
+    const onDocumentDragEnd = () => {
+      globalDragTargetsRef.current = [];
+      dispatch({ isDragGlobal: false, type: "setDragGlobal" });
+    };
+
+    const onDocumentDropGlobal = () => {
+      globalDragTargetsRef.current = [];
+      dispatch({ isDragGlobal: false, type: "setDragGlobal" });
+    };
+
+    document.addEventListener("dragenter", onDocumentDragEnter, false);
+    document.addEventListener("dragleave", onDocumentDragLeave, false);
+    document.addEventListener("dragend", onDocumentDragEnd, false);
+    document.addEventListener("drop", onDocumentDropGlobal, false);
+
+    return () => {
+      document.removeEventListener("dragenter", onDocumentDragEnter);
+      document.removeEventListener("dragleave", onDocumentDragLeave);
+      document.removeEventListener("dragend", onDocumentDragEnd);
+      document.removeEventListener("drop", onDocumentDropGlobal);
+    };
+  }, [rootRef]);
+
   // Auto focus the root when autoFocus is true
   useEffect(() => {
     if (!disabled && autoFocus && rootRef.current) {
@@ -1028,6 +1081,11 @@ function reducer(state, action) {
         fileRejections: action.fileRejections,
         isDragReject: action.isDragReject,
       };
+    case "setDragGlobal":
+      return {
+        ...state,
+        isDragGlobal: action.isDragGlobal,
+      };
     case "reset":
       return {
         ...initialState,

package/src/index.spec.js

@@ -579,13 +579,16 @@ describe("useDropzone() hook", () => {
         </Dropzone>
       );
 
-      expect(addEventListenerSpy).toHaveBeenCalledTimes(2);
+      expect(addEventListenerSpy).toHaveBeenCalledTimes(6);
 
       const addEventCalls = collectEventListenerCalls(addEventListenerSpy);
       const events = Object.keys(addEventCalls);
 
       expect(events).toContain("dragover");
       expect(events).toContain("drop");
+      expect(events).toContain("dragenter");
+      expect(events).toContain("dragleave");
+      expect(events).toContain("dragend");
 
       events.forEach((eventName) => {
         const [fn, options] = addEventCalls[eventName];
@@ -607,7 +610,7 @@ describe("useDropzone() hook", () => {
 
       unmount();
 
-      expect(removeEventListenerSpy).toHaveBeenCalledTimes(2);
+      expect(removeEventListenerSpy).toHaveBeenCalledTimes(6);
 
       const addEventCalls = collectEventListenerCalls(addEventListenerSpy);
       const removeEventCalls = collectEventListenerCalls(
@@ -617,6 +620,9 @@ describe("useDropzone() hook", () => {
 
       expect(events).toContain("dragover");
       expect(events).toContain("drop");
+      expect(events).toContain("dragenter");
+      expect(events).toContain("dragleave");
+      expect(events).toContain("dragend");
 
       events.forEach((eventName) => {
         const [a] = addEventCalls[eventName];
@@ -2360,6 +2366,46 @@ describe("useDropzone() hook", () => {
       expect(dropzone).toHaveTextContent("dragReject");
     });
 
+    it("accepts files with empty type during dragenter (Chrome .md file issue)", async () => {
+      const markdownFiles = [createFile("README.md", 1234, "text/markdown")];
+
+      const { container } = render(
+        <Dropzone
+          accept={{
+            "text/markdown": [".md"],
+          }}
+        >
+          {({
+            getRootProps,
+            getInputProps,
+            isDragActive,
+            isDragAccept,
+            isDragReject,
+          }) => (
+            <div {...getRootProps()}>
+              <input {...getInputProps()} />
+              {isDragActive && "dragActive"}
+              {isDragAccept && "dragAccept"}
+              {isDragReject && "dragReject"}
+            </div>
+          )}
+        </Dropzone>
+      );
+      const dropzone = container.querySelector("div");
+
+      // Simulate Chrome's behavior: during drag, .md files have empty type
+      await act(() =>
+        fireEvent.dragEnter(
+          dropzone,
+          createDtWithFiles(markdownFiles, { emptyTypes: true })
+        )
+      );
+
+      expect(dropzone).toHaveTextContent("dragActive");
+      expect(dropzone).toHaveTextContent("dragAccept");
+      expect(dropzone).not.toHaveTextContent("dragReject");
+    });
+
     it("sets {isDragActive, isDragAccept, isDragReject} if any files are rejected and {multiple} is false on dragenter", async () => {
       const { container } = render(
         <Dropzone
@@ -2632,6 +2678,94 @@ describe("useDropzone() hook", () => {
       expect(dropzone).not.toHaveTextContent("dragReject");
     });
 
+    it("sets {isDragGlobal} to true when drag event is detected on document", async () => {
+      const { container } = render(
+        <Dropzone>
+          {({ getRootProps, getInputProps, isDragGlobal }) => (
+            <div {...getRootProps()}>
+              <input {...getInputProps()} />
+              {isDragGlobal && "dragGlobal"}
+            </div>
+          )}
+        </Dropzone>
+      );
+      const dropzone = container.querySelector("div");
+
+      await act(() =>
+        fireEvent.dragEnter(document.body, createDtWithFiles(files))
+      );
+
+      expect(dropzone).toHaveTextContent("dragGlobal");
+    });
+
+    it("sets {isDragGlobal} to false when drag leaves document", async () => {
+      const { container } = render(
+        <Dropzone>
+          {({ getRootProps, getInputProps, isDragGlobal }) => (
+            <div {...getRootProps()}>
+              <input {...getInputProps()} />
+              {isDragGlobal && "dragGlobal"}
+            </div>
+          )}
+        </Dropzone>
+      );
+      const dropzone = container.querySelector("div");
+
+      await act(() =>
+        fireEvent.dragEnter(document.body, createDtWithFiles(files))
+      );
+      expect(dropzone).toHaveTextContent("dragGlobal");
+
+      await act(() =>
+        fireEvent.dragLeave(document.body, createDtWithFiles(files))
+      );
+      expect(dropzone).not.toHaveTextContent("dragGlobal");
+    });
+
+    it("sets {isDragGlobal} to false when drop occurs on document", async () => {
+      const { container } = render(
+        <Dropzone>
+          {({ getRootProps, getInputProps, isDragGlobal }) => (
+            <div {...getRootProps()}>
+              <input {...getInputProps()} />
+              {isDragGlobal && "dragGlobal"}
+            </div>
+          )}
+        </Dropzone>
+      );
+      const dropzone = container.querySelector("div");
+
+      await act(() =>
+        fireEvent.dragEnter(document.body, createDtWithFiles(files))
+      );
+      expect(dropzone).toHaveTextContent("dragGlobal");
+
+      await act(() => fireEvent.drop(document.body, createDtWithFiles(files)));
+      expect(dropzone).not.toHaveTextContent("dragGlobal");
+    });
+
+    it("sets {isDragGlobal} to false when dragend occurs on document", async () => {
+      const { container } = render(
+        <Dropzone>
+          {({ getRootProps, getInputProps, isDragGlobal }) => (
+            <div {...getRootProps()}>
+              <input {...getInputProps()} />
+              {isDragGlobal && "dragGlobal"}
+            </div>
+          )}
+        </Dropzone>
+      );
+      const dropzone = container.querySelector("div");
+
+      await act(() =>
+        fireEvent.dragEnter(document.body, createDtWithFiles(files))
+      );
+      expect(dropzone).toHaveTextContent("dragGlobal");
+
+      fireEvent.dragEnd(document.body, createDtWithFiles(files));
+      expect(dropzone).not.toHaveTextContent("dragGlobal");
+    });
+
     it("rejects all files if {multiple} is false and {accept} criteria is not met", async () => {
       const onDropSpy = jest.fn();
 
@@ -3581,15 +3715,18 @@ function focusWindow() {
 /**
  * createDtWithFiles creates a mock data transfer object that can be used for drop events
  * @param {File[]} files
+ * @param {object} options
+ * @param {boolean} options.emptyTypes - If true, sets item types to empty string (simulates Chrome drag behavior)
  */
-function createDtWithFiles(files = []) {
+function createDtWithFiles(files = [], options = {}) {
+  const { emptyTypes = false } = options;
   return {
     dataTransfer: {
       files,
       items: files.map((file) => ({
         kind: "file",
         size: file.size,
-        type: file.type,
+        type: emptyTypes ? "" : file.type,
         getAsFile: () => file,
       })),
       types: ["Files"],

package/src/utils/index.js

@@ -53,19 +53,45 @@ export const TOO_MANY_FILES_REJECTION = {
   message: "Too many files",
 };
 
+/**
+ * Check if the given file is a DataTransferItem with an empty type.
+ *
+ * During drag events, browsers may return DataTransferItem objects instead of File objects.
+ * Some browsers (e.g., Chrome) return an empty MIME type for certain file types (like .md files)
+ * on DataTransferItem during drag events, even though the type is correctly set during drop.
+ *
+ * This function detects such cases by checking for:
+ * 1. Empty type string
+ * 2. Presence of getAsFile method (indicates it's a DataTransferItem, not a File)
+ *
+ * We accept these during drag to provide proper UI feedback, while maintaining
+ * strict validation during drop when real File objects are available.
+ *
+ * @param {File | DataTransferItem} file
+ * @returns {boolean}
+ */
+export function isDataTransferItemWithEmptyType(file) {
+  return file.type === "" && typeof file.getAsFile === "function";
+}
+
 /**
  * Check if file is accepted.
  *
  * Firefox versions prior to 53 return a bogus MIME type for every file drag,
  * so dragovers with that MIME type will always be accepted.
  *
+ * Chrome/other browsers may return an empty MIME type for files during drag events,
+ * so we accept those as well (we'll validate properly on drop).
+ *
  * @param {File} file
  * @param {string} accept
  * @returns
  */
 export function fileAccepted(file, accept) {
   const isAcceptable =
-    file.type === "application/x-moz-file" || accepts(file, accept);
+    file.type === "application/x-moz-file" ||
+    accepts(file, accept) ||
+    isDataTransferItemWithEmptyType(file);
   return [
     isAcceptable,
     isAcceptable ? null : getInvalidTypeRejectionErr(accept),

package/src/utils/index.spec.js

@@ -262,6 +262,31 @@ describe("fileAccepted()", () => {
     expect(utils.fileAccepted(file, ".pdf")).toEqual([true, null]);
   });
 
+  it("accepts DataTransferItem with empty type during drag (Chrome .md file issue)", () => {
+    // Simulate Chrome's DataTransferItem during drag with empty type
+    const dataTransferItem = {
+      type: "",
+      kind: "file",
+      getAsFile: () => createFile("README.md", 100, ""),
+    };
+    expect(utils.fileAccepted(dataTransferItem, "text/markdown")).toEqual([
+      true,
+      null,
+    ]);
+  });
+
+  it("rejects regular File with empty type (not DataTransferItem)", () => {
+    // Regular File objects (on drop) with empty type should still be rejected
+    const file = createFile("unknown.xyz", 100, "");
+    expect(utils.fileAccepted(file, "text/markdown")).toEqual([
+      false,
+      {
+        code: "file-invalid-type",
+        message: "File type must be text/markdown",
+      },
+    ]);
+  });
+
   it("accepts file when single accept criteria", () => {
     const file = createFile("hamster.pdf", 100, "application/pdf");
     expect(utils.fileAccepted(file, ".pdf")).toEqual([true, null]);

package/styleguide.config.js

@@ -56,6 +56,10 @@ module.exports = {
           name: "Styling Dropzone",
           content: "examples/styling/README.md",
         },
+        {
+          name: "Drag Overlay",
+          content: "examples/drag-overlay/README.md",
+        },
         {
           name: "Accepting specific file types",
           content: "examples/accept/README.md",

package/typings/react-dropzone.d.ts

@@ -71,6 +71,7 @@ export type DropzoneState = DropzoneRef & {
   isDragActive: boolean;
   isDragAccept: boolean;
   isDragReject: boolean;
+  isDragGlobal: boolean;
   isFileDialogActive: boolean;
   acceptedFiles: readonly FileWithPath[];
   fileRejections: readonly FileRejection[];