react-dropzone 11.2.3 → 11.3.2

package/examples/doka/README.md

@@ -0,0 +1,140 @@
+If you'd like to integrate the dropzone with the [doka](https://pqina.nl/doka/?ref=react-dropzone) image editor, you just need to pass either of the selected images to the `create()` method exported by doka:
+
+```jsx harmony
+import React, {useEffect, useState} from 'react';
+import {useDropzone} from 'react-dropzone';
+
+import {create} from 'doka';
+
+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,
+  background: "rgba(0,0,0,.8)",
+  color: "#fff",
+  border: 0,
+  borderRadius: ".325em",
+  cursor: "pointer"
+};
+
+const editImage = (image, done) => {
+  const imageFile = image.doka ? image.doka.file : image;
+  const imageState = image.doka ? image.doka.data : {};
+  create({
+    // recreate previous state
+    ...imageState,
+
+    // load original image file
+    src: imageFile,
+    outputData: true,
+
+    onconfirm: ({ file, data }) => {
+      Object.assign(file, {
+        doka: { file: imageFile, data }
+      });
+      done(file);
+    }
+  });
+};
+
+function Doka(props) {
+  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 data uris 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>
+  );
+}
+
+<Doka />
+```

package/examples/validator/README.md

@@ -0,0 +1,68 @@
+By providing `validator` prop you can specify custom validation for files.
+
+The value must be a function that accepts File object and returns null if file should be accepted or error object/array of error objects if file should me rejected.
+
+```jsx harmony
+import React from 'react';
+import {useDropzone} from 'react-dropzone';
+
+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(props) {
+  const {
+    acceptedFiles,
+    fileRejections,
+    getRootProps,
+    getInputProps
+  } = useDropzone({
+    validator: nameLengthValidator
+  });
+
+  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 files with name less than 20 characters will be accepted)</em>
+      </div>
+      <aside>
+        <h4>Accepted files</h4>
+        <ul>{acceptedFileItems}</ul>
+        <h4>Rejected files</h4>
+        <ul>{fileRejectionItems}</ul>
+      </aside>
+    </section>
+  );
+}
+
+<CustomValidation />
+```
+

package/package.json

@@ -166,8 +166,11 @@
       "path": "@commitlint/prompt"
     }
   },
-  "version": "11.2.3",
+  "version": "11.3.2",
   "engines": {
     "node": ">= 10"
-  }
+  },
+  "browserslist": [
+    "defaults"
+  ]
 }

package/src/index.js

@@ -60,7 +60,8 @@ const defaultProps = {
   noClick: false,
   noKeyboard: false,
   noDrag: false,
-  noDragEventsBubbling: false
+  noDragEventsBubbling: false,
+  validator: null
 }
 
 Dropzone.defaultProps = defaultProps
@@ -226,7 +227,14 @@ Dropzone.propTypes = {
    * @param {FileRejection[]} fileRejections
    * @param {(DragEvent|Event)} event
    */
-  onDropRejected: PropTypes.func
+  onDropRejected: PropTypes.func,
+
+  /**
+   * Custom validation function 
+   * @param {File} file
+   * @returns {FileError|FileError[]}
+   */
+  validator: PropTypes.func
 }
 
 export default Dropzone
@@ -398,7 +406,8 @@ export function useDropzone(options = {}) {
     noClick,
     noKeyboard,
     noDrag,
-    noDragEventsBubbling
+    noDragEventsBubbling,
+    validator
   } = {
     ...defaultProps,
     ...options
@@ -545,13 +554,14 @@ export function useDropzone(options = {}) {
       event.persist()
       stopPropagation(event)
 
-      if (event.dataTransfer) {
+      const hasFiles = isEvtWithFiles(event);
+      if (hasFiles && event.dataTransfer) {
         try {
           event.dataTransfer.dropEffect = 'copy'
         } catch {} /* eslint-disable-line no-empty */
       }
 
-      if (isEvtWithFiles(event) && onDragOver) {
+      if (hasFiles && onDragOver) {
         onDragOver(event)
       }
 
@@ -615,11 +625,18 @@ export function useDropzone(options = {}) {
           files.forEach(file => {
             const [accepted, acceptError] = fileAccepted(file, accept)
             const [sizeMatch, sizeError] = fileMatchSize(file, minSize, maxSize)
-            if (accepted && sizeMatch) {
+            const customErrors = validator ? validator(file) : null;
+
+            if (accepted && sizeMatch && !customErrors) {
               acceptedFiles.push(file)
             } else {
-              const errors = [acceptError, sizeError].filter(e => e)
-              fileRejections.push({ file, errors })
+              let errors = [acceptError, sizeError];
+              
+              if (customErrors) {
+                errors = errors.concat(customErrors);
+              }
+
+              fileRejections.push({ file, errors: errors.filter(e => e) })
             }
           })
 

package/src/index.spec.js

@@ -2719,6 +2719,47 @@ describe('useDropzone() hook', () => {
       expect(fn).not.toThrow()
     })
   })
+
+  describe('validator', () => {
+    it('rejects with custom error', async () => {
+      const validator = file => {
+        if (/dogs/i.test(file.name))
+          return { code: 'dogs-not-allowed', message: 'Dogs not allowed' };
+
+        return null;
+      }
+      
+      const onDropSpy = jest.fn()
+
+      const ui = (
+        <Dropzone validator={validator} onDrop={onDropSpy} multiple={true}>
+          {({ getRootProps, getInputProps }) => (
+            <div {...getRootProps()}>
+              <input {...getInputProps()} />
+            </div>
+          )}
+        </Dropzone>
+      )
+
+      const { container, rerender } = render(ui)
+      const dropzone = container.querySelector('div')
+
+      fireDrop(dropzone, createDtWithFiles(images))
+      await flushPromises(rerender, ui)
+
+      expect(onDropSpy).toHaveBeenCalledWith([images[0]], [
+        {
+          file: images[1],
+          errors: [
+            {
+              code: 'dogs-not-allowed',
+              message: 'Dogs not allowed',
+            }
+          ]
+        }
+      ], expect.anything())
+    })
+  })
 })
 
 async function flushPromises(rerender, ui) {

package/styleguide.config.js

@@ -6,18 +6,25 @@ const { createConfig, babel, css, devServer } = require('webpack-blocks')
 module.exports = {
   title: 'react-dropzone',
   styleguideDir: path.join(__dirname, 'styleguide'),
+  template: {
+    favicon: 'https://github.com/react-dropzone/react-dropzone/raw/master/logo/logo.png'
+  },
   webpackConfig: createConfig([babel(), css(), devServer({
     disableHostCheck: true,
     host: '0.0.0.0',
   })]),
   exampleMode: 'expand',
   usageMode: 'expand',
-  showSidebar: false,
+  showSidebar: true,
   serverPort: 8080,
   moduleAliases: {
-    'react-dropzone': path.resolve(__dirname, './src')
+    'react-dropzone': path.resolve(__dirname, './src'),
+    'doka': path.resolve(__dirname, './vendor/doka/doka.esm.min.js')
   },
-  require: [path.join(__dirname, 'examples/theme.css')],
+  require: [
+    path.join(__dirname, 'examples/theme.css'),
+    path.join(__dirname, 'vendor/doka/doka.min.css'),
+  ],
   sections: [
     {
       name: '',
@@ -52,6 +59,10 @@ module.exports = {
           name: 'Accepting specific number of files',
           content: 'examples/maxFiles/README.md'
         },
+        {
+          name: 'Custom validation',
+          content: 'examples/validator/README.md'
+        },
         {
           name: 'Opening File Dialog Programmatically',
           content: 'examples/file-dialog/README.md'
@@ -69,6 +80,15 @@ module.exports = {
           content: 'examples/plugins/README.md'
         }
       ]
+    },
+    {
+      name: 'Integrations',
+      sections: [
+        {
+          name: 'Doka',
+          content: 'examples/doka/README.md'
+        }
+      ]
     }
   ]
 }

package/typings/react-dropzone.d.ts

@@ -10,7 +10,7 @@ export interface DropzoneProps extends DropzoneOptions {
 
 export interface FileError {
   message: string;
-  code: "file-too-large" | "file-too-small"|"too-many-files"|"file-invalid-type";
+  code: "file-too-large" | "file-too-small" | "too-many-files" | "file-invalid-type" | string;
 }
 
 export interface FileRejection {
@@ -34,6 +34,7 @@ export type DropzoneOptions = Pick<React.HTMLProps<HTMLElement>, PropTypes> & {
   onDropRejected?: (fileRejections: FileRejection[], event: DropEvent) => void;
   getFilesFromEvent?: (event: DropEvent) => Promise<Array<File | DataTransferItem>>;
   onFileDialogCancel?: () => void;
+  validator?: <T extends File>(file: T) => FileError | FileError[] | null;
 };
 
 export type DropEvent = React.DragEvent<HTMLElement> | React.ChangeEvent<HTMLInputElement> | DragEvent | Event;