react-dropzone 15.0.0 → 16.0.0

package/examples/drag-overlay/README.md

@@ -1,132 +0,0 @@
-# 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/examples/events/README.md

@@ -1,164 +0,0 @@
-If you'd like to prevent drag events propagation from the child to parent, you can use the `{noDragEventsBubbling}` property on the child:
-```jsx harmony
-import React from 'react';
-import {useDropzone} from 'react-dropzone';
-
-function OuterDropzone(props) {
-  const {getRootProps} = useDropzone({
-    // Note how this callback is never invoked if drop occurs on the inner dropzone
-    onDrop: files => console.log(files)
-  });
-
-  return (
-    <div className="container">
-      <div {...getRootProps({className: 'dropzone'})}>
-        <InnerDropzone />
-        <p>Outer dropzone</p>
-      </div>
-    </div>
-  );
-}
-
-function InnerDropzone(props) {
-  const {getRootProps} = useDropzone({noDragEventsBubbling: true});
-  return (
-    <div {...getRootProps({className: 'dropzone'})}>
-      <p>Inner dropzone</p>
-    </div>
-  );
-}
-
-<OuterDropzone />
-```
-
-Note that internally we use `event.stopPropagation()` to achieve the behavior illustrated above, but this comes with its own [drawbacks](https://javascript.info/bubbling-and-capturing#stopping-bubbling).
-
-If you'd like to selectively turn off the default dropzone behavior for `onClick`, use the `{noClick}` property:
-```jsx harmony
-import React from 'react';
-import {useDropzone} from 'react-dropzone';
-
-function DropzoneWithoutClick(props) {
-  const {getRootProps, getInputProps, acceptedFiles} = useDropzone({noClick: true});
-  const files = acceptedFiles.map(file => <li key={file.path}>{file.path}</li>);
-
-  return (
-    <section className="container">
-      <div {...getRootProps({className: 'dropzone'})}>
-        <input {...getInputProps()} />
-        <p>Dropzone without click events</p>
-      </div>
-      <aside>
-        <h4>Files</h4>
-        <ul>{files}</ul>
-      </aside>
-    </section>
-  );
-}
-
-<DropzoneWithoutClick />
-```
-
-If you'd like to selectively turn off the default dropzone behavior for `onKeyDown`, `onFocus` and `onBlur`, use the `{noKeyboard}` property:
-```jsx harmony
-import React from 'react';
-import {useDropzone} from 'react-dropzone';
-
-function DropzoneWithoutKeyboard(props) {
-  const {getRootProps, getInputProps, acceptedFiles} = useDropzone({noKeyboard: true});
-  const files = acceptedFiles.map(file => <li key={file.path}>{file.path}</li>);
-
-  return (
-    <section className="container">
-      <div {...getRootProps({className: 'dropzone'})}>
-        <input {...getInputProps()} />
-        <p>Dropzone without keyboard events</p>
-        <em>(SPACE/ENTER and focus events are disabled)</em>
-      </div>
-      <aside>
-        <h4>Files</h4>
-        <ul>{files}</ul>
-      </aside>
-    </section>
-  );
-}
-
-<DropzoneWithoutKeyboard />
-```
-
-Or you can prevent the default behavior for both click and keyboard events if you omit the input:
-```jsx harmony
-import React from 'react';
-import {useDropzone} from 'react-dropzone';
-
-function DropzoneWithoutClick(props) {
-  const {getRootProps, acceptedFiles} = useDropzone();
-  const files = acceptedFiles.map(file => <li key={file.path}>{file.path}</li>);
-
-  return (
-    <section className="container">
-      <div {...getRootProps({className: 'dropzone'})}>
-        <p>Dropzone without click events</p>
-      </div>
-      <aside>
-        <h4>Files</h4>
-        <ul>{files}</ul>
-      </aside>
-    </section>
-  );
-}
-
-<DropzoneWithoutClick />
-```
-
-**NOTE** If the browser supports the [File System Access API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_Access_API) and you've set the `useFsAccessApi` to true, removing the `<input>` has no effect.
-
-If you'd like to selectively turn off the default dropzone behavior for drag events, use the `{noDrag}` property:
-```jsx harmony
-import React from 'react';
-import {useDropzone} from 'react-dropzone';
-
-function DropzoneWithoutDrag(props) {
-  const {getRootProps, getInputProps, acceptedFiles} = useDropzone({noDrag: true});
-  const files = acceptedFiles.map(file => <li key={file.path}>{file.path}</li>);
-
-  return (
-    <section className="container">
-      <div {...getRootProps({className: 'dropzone'})}>
-        <input {...getInputProps()} />
-        <p>Dropzone with no drag events</p>
-        <em>(Drag 'n' drop is disabled)</em>
-      </div>
-      <aside>
-        <h4>Files</h4>
-        <ul>{files}</ul>
-      </aside>
-    </section>
-  );
-}
-
-<DropzoneWithoutDrag />
-```
-
-Keep in mind that if you provide your own callback handlers as well and use `event.stopPropagation()`, it will prevent the default dropzone behavior:
-```jsx harmony
-import React from 'react';
-import Dropzone from 'react-dropzone';
-
-// Note that there will be nothing logged when files are dropped
-<Dropzone onDrop={files => console.log(files)}>
-  {({getRootProps, getInputProps}) => (
-    <div className="container">
-      <div
-        {...getRootProps({
-          className: 'dropzone',
-          onDrop: event => event.stopPropagation()
-        })}
-      >
-        <input {...getInputProps()} />
-        <p>Drag 'n' drop some files here, or click to select files</p>
-      </div>
-    </div>
-  )}
-</Dropzone>
-```

package/examples/file-dialog/README.md

@@ -1,90 +0,0 @@
-You can programmatically invoke the default OS file prompt; just use the `open` method returned by the hook.
-
-**Note** that for security reasons most browsers require popups and dialogues to originate from a direct user interaction (i.e. click).
-
-If you are calling `open()` asynchronously, there’s a good chance it’s going to be blocked by the browser. So if you are calling `open()` asynchronously, be sure there is no more than *1000ms* delay between user interaction and `open()` call.
-
-Due to the lack of official docs on this (at least we haven’t found any. If you know one, feel free to open PR), there is no guarantee that **allowed delay duration** will not be changed in later browser versions. Since implementations may differ between different browsers, avoid calling open asynchronously if possible.
-
-```jsx harmony
-import React from 'react';
-import {useDropzone} from 'react-dropzone';
-
-function Dropzone(props) {
-  const {getRootProps, getInputProps, open, acceptedFiles} = useDropzone({
-    // Disable click and keydown behavior
-    noClick: true,
-    noKeyboard: true
-  });
-
-  const files = acceptedFiles.map(file => (
-    <li key={file.path}>
-      {file.path} - {file.size} bytes
-    </li>
-  ));
-
-  return (
-    <div className="container">
-      <div {...getRootProps({className: 'dropzone'})}>
-        <input {...getInputProps()} />
-        <p>Drag 'n' drop some files here</p>
-        <button type="button" onClick={open}>
-          Open File Dialog
-        </button>
-      </div>
-      <aside>
-        <h4>Files</h4>
-        <ul>{files}</ul>
-      </aside>
-    </div>
-  );
-}
-
-<Dropzone />
-```
-
-Or use the `ref` exposed by the `<Dropzone>` component:
-
-```jsx harmony
-import React, {createRef} from 'react';
-import Dropzone from 'react-dropzone';
-
-const dropzoneRef = createRef();
-const openDialog = () => {
-  // Note that the ref is set async,
-  // so it might be null at some point 
-  if (dropzoneRef.current) {
-    dropzoneRef.current.open()
-  }
-};
-
-// Disable click and keydown behavior on the <Dropzone>
-<Dropzone ref={dropzoneRef} noClick noKeyboard>
-  {({getRootProps, getInputProps, acceptedFiles}) => {
-    return (
-      <div className="container">
-        <div {...getRootProps({className: 'dropzone'})}>
-          <input {...getInputProps()} />
-          <p>Drag 'n' drop some files here</p>
-          <button
-            type="button"
-            onClick={openDialog}
-          >
-            Open File Dialog
-          </button>
-        </div>
-        <aside>
-          <h4>Files</h4>
-          <ul>
-            {acceptedFiles.map(file => (
-              <li key={file.path}>
-                {file.path} - {file.size} bytes
-              </li>
-            ))}
-          </ul>
-        </aside>
-      </div>
-    );
-  }}
-</Dropzone>
-```

package/examples/forms/README.md

@@ -1,69 +0,0 @@
-React-dropzone does not submit the files in form submissions by default. 
-
-If you need this behavior, you can add a hidden file input, and set the files into it. 
-
-
-```jsx harmony
-import React, {useRef} from 'react';
-import {useDropzone} from 'react-dropzone';
-
-function Dropzone(props) {
-  const {required, name} = props; 
-
-  const hiddenInputRef = useRef(null);
-
-  const {getRootProps, getInputProps, open, acceptedFiles} = useDropzone({
-    onDrop: (incomingFiles) => {
-      if (hiddenInputRef.current) {
-        // Note the specific way we need to munge the file into the hidden input
-        // https://stackoverflow.com/a/68182158/1068446
-        const dataTransfer = new DataTransfer();
-        incomingFiles.forEach((v) => {
-          dataTransfer.items.add(v);
-        });
-        hiddenInputRef.current.files = dataTransfer.files;
-      }
-    }
-  });
-
-  const files = acceptedFiles.map(file => (
-    <li key={file.path}>
-      {file.path} - {file.size} bytes
-    </li>
-  ));
-
-  return (
-    <div className="container">
-      <div {...getRootProps({className: 'dropzone'})}>
-        {/*
-          Add a hidden file input 
-          Best to use opacity 0, so that the required validation message will appear on form submission
-        */}
-        <input type ="file" name={name} required={required} style ={{opacity: 0}} ref={hiddenInputRef}/>
-        <input {...getInputProps()} />
-        <p>Drag 'n' drop some files here</p>
-        <button type="button" onClick={open}>
-          Open File Dialog
-        </button>
-      </div>
-      <aside>
-        <h4>Files</h4>
-        <ul>{files}</ul>
-      </aside>
-    </div>
-  );
-}
-
-
-<form onSubmit={(e) => {
-  e.preventDefault(); 
-  
-  // Now get the form data as you regularly would
-  const formData = new FormData(e.currentTarget);
-  const file =  formData.get("my-file");
-  alert(file.name); 
-}}>
-  <Dropzone name ="my-file" required/>
-  <button type="submit">Submit</button>
-</form>
-```

package/examples/maxFiles/README.md

@@ -1,58 +0,0 @@
-By providing `maxFiles` prop you can limit how many files the dropzone accepts.
-
-**Note** that this prop is enabled when the `multiple` prop is enabled.
-The default value for this prop is 0, which means there's no limitation to how many files are accepted.
-
-
-```jsx harmony
-import React from 'react';
-import {useDropzone} from 'react-dropzone';
-
-function AcceptMaxFiles(props) {
-  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  }) => { 
-   return (
-     <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>
-  );
-}
-
-<AcceptMaxFiles />
-```

package/examples/no-jsx/README.md

@@ -1,32 +0,0 @@
-If you'd like to use [react without JSX](https://reactjs.org/docs/react-without-jsx.html) you can:
-
-```js harmony
-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 => React.createElement('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)
-    ])
-  ]);
-}
-
-Basic()
-```

package/examples/pintura/README.md

@@ -1,146 +0,0 @@
-If you'd like to integrate the dropzone with the [Pintura](https://pqina.nl/pintura/?ref=react-dropzone) image editor, you just need to pass either of the selected images to the `openDefaultEditor()` method exported by Pintura:
-
-```jsx static
-import React, { useState, useEffect } from 'react';
-
-// React Dropzone
-import { useDropzone } from 'react-dropzone';
-
-// Pintura Image Editor
-import 'pintura/pintura.css';
-import { openDefaultEditor } from 'pintura';
-
-// Based on the default React Dropzone image thumbnail example
-// The `thumbButton` style positions the edit button in the bottom right corner of the thumbnail
-const thumbsContainer = {
-    display: 'flex',
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    marginTop: 16,
-    padding: 20,
-};
-
-const thumb = {
-    position: 'relative',
-    display: 'inline-flex',
-    borderRadius: 2,
-    border: '1px solid #eaeaea',
-    marginBottom: 8,
-    marginRight: 8,
-    width: 100,
-    height: 100,
-    padding: 4,
-    boxSizing: 'border-box',
-};
-
-const thumbInner = {
-    display: 'flex',
-    minWidth: 0,
-    overflow: 'hidden',
-};
-
-const img = {
-    display: 'block',
-    width: 'auto',
-    height: '100%',
-};
-
-const thumbButton = {
-    position: 'absolute',
-    right: 10,
-    bottom: 10,
-};
-
-// This function is called when the user taps the edit button.
-// It opens the editor and returns the modified file when done
-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('close', () => {
-        // the user cancelled editing the image
-    });
-
-    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 style={thumb} key={file.name}>
-            <div style={thumbInner}>
-                <img src={file.preview} style={img} alt="" />
-            </div>
-            <button
-                style={thumbButton}
-                onClick={() =>
-                    editImage(file, (output) => {
-                        const updatedFiles = [...files];
-
-                        // replace original image with new image
-                        updatedFiles[index] = output;
-
-                        // revoke preview URL for old image
-                        if (file.preview) URL.revokeObjectURL(file.preview);
-
-                        // set new preview URL
-                        Object.assign(output, {
-                            preview: URL.createObjectURL(output),
-                        });
-
-                        // update view
-                        setFiles(updatedFiles);
-                    })
-                }
-            >
-                Edit
-            </button>
-        </div>
-    ));
-
-    useEffect(
-        () => () => {
-            // Make sure to revoke the Object URL to avoid memory leaks
-            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 style={thumbsContainer}>{thumbs}</aside>
-        </section>
-    );
-}
-
-export default App;
-```