Improves styles; adds dragged and draggedReject keys to all extra pro…

…ps; dropzone can be styled with dropzoneReject style; prepares for 2.2.0

README.md

@@ -61,7 +61,7 @@ const MyUploader = () => {
 
 
 ## UMD Build
-This library is available as an ES Module at <https://unpkg.com/react-dropzone-uploader@2.1.2/dist/react-dropzone-uploader.umd.js>.
+This library is available as an ES Module at <https://unpkg.com/react-dropzone-uploader@2.2.0/dist/react-dropzone-uploader.umd.js>.
 
 If you want to include it in your page, you need to include the dependencies and CSS as well.
 
@@ -70,8 +70,8 @@ If you want to include it in your page, you need to include the dependencies and
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.2/prop-types.min.js"></script>
 
-<script src="https://unpkg.com/react-dropzone-uploader@2.1.2/dist/react-dropzone-uploader.umd.js"></script>
-<link rel"stylesheet" href="https://unpkg.com/react-dropzone-uploader@2.1.2/dist/styles.css"></script>
+<script src="https://unpkg.com/react-dropzone-uploader@2.2.0/dist/react-dropzone-uploader.umd.js"></script>
+<link rel"stylesheet" href="https://unpkg.com/react-dropzone-uploader@2.2.0/dist/styles.css"></script>
 ~~~
 
 

codepen/index.js

@@ -2,8 +2,8 @@
 https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js
 https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js
 https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.2/prop-types.min.js
-https://unpkg.com/react-dropzone-uploader@2.1.2/dist/react-dropzone-uploader.umd.js
-https://unpkg.com/react-dropzone-uploader@2.1.2/dist/styles.css
+https://unpkg.com/react-dropzone-uploader@<version>/dist/react-dropzone-uploader.umd.js
+https://unpkg.com/react-dropzone-uploader@<version>/dist/styles.css
  */
 
 // index.html: `<div id="example"></div>`

docs/customization.md

@@ -22,6 +22,8 @@ Both `classNames` and `styles` should be objects containing a subset of the foll
   + wrapper for dropzone if dropzone has files
 - `dropzoneActive`
   + wrapper for dropzone on drag over; this is __added__ to the __dropzone__ or __dropzoneWithFiles__ class
+- `dropzoneReject`
+  + wrapper for dropzone on drag over if file MIME types in [DataTransfer.items](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/items) don't match `accept` prop; this is __added__ to the __dropzone__ or __dropzoneWithFiles__ class
 - `input`
   + input
 - `inputLabel`

docs/examples.md

@@ -10,7 +10,7 @@ title: Live Examples
 ## Standard
 Uploads files to <https://httpbin.org/post>, and merges extra `fileUrl` field into file meta. Logs file metadata to console on submit.
 
-Only accepts __image__, __audio__, and __video__ files. Limits dropzone height with `styles` prop.
+Only accepts __image__, __audio__, and __video__ files. Limits dropzone height with `styles` prop, and colors dropzone red on drag if files will be rejected because of file type.
 
 ~~~js
 const Standard = () => {
@@ -33,7 +33,11 @@ const Standard = () => {
       onChangeStatus={handleChangeStatus}
       onSubmit={handleSubmit}
       accept="image/*,audio/*,video/*"
-      styles={{ dropzone: { height: 200 }, dropzoneWithFiles: { maxHeight: 250 } }}
+      styles={{
+        dropzone: { height: 200 },
+        dropzoneWithFiles: { maxHeight: 250 },
+        dropzoneReject: { borderColor: 'red', backgroundColor: '#DAA' },
+      }}
     />
   )
 }
@@ -73,7 +77,7 @@ const NoUpload = () => {
 
 
 ## Single File, Auto Submit
-Automatically logs file to the console when it finishes uploading, then removes it from dropzone. Doesn't include submit button.
+Automatically removes files from dropzone when it finishes uploading. Doesn't include submit button.
 
 Changes border color for "active" dropzone using `styles` prop.
 
@@ -106,7 +110,7 @@ const SingleFileAutoSubmit = () => {
         styles={{
           dropzone: { width: 400, height: 200 },
           dropzoneWithFiles: { width: 400, height: 200 },
-          dropzoneActive: { borderColor: 'red' },
+          dropzoneActive: { borderColor: 'green' },
         }}
       />
     </React.Fragment>

examples/src/index.js

@@ -26,7 +26,11 @@ const Standard = () => {
       onChangeStatus={handleChangeStatus}
       onSubmit={handleSubmit}
       accept="image/*,audio/*,video/*"
-      styles={{ dropzone: { height: 200 }, dropzoneWithFiles: { maxHeight: 250 } }}
+      styles={{
+        dropzone: { height: 200 },
+        dropzoneWithFiles: { maxHeight: 250 },
+        dropzoneReject: { borderColor: 'red', backgroundColor: '#DAA' },
+      }}
     />
   )
 }
@@ -80,7 +84,7 @@ const SingleFileAutoSubmit = () => {
         styles={{
           dropzone: { width: 400, height: 200 },
           dropzoneWithFiles: { width: 400, height: 200 },
-          dropzoneActive: { borderColor: 'red' },
+          dropzoneActive: { borderColor: 'green' },
         }}
       />
     </React.Fragment>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dropzone-uploader",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "author": "Kyle Bebak <kylebebak@gmail.com>",
   "description": "React file dropzone and uploader: fully customizable, progress indicators, upload cancellation and restart, zero deps",
   "main": "./dist/react-dropzone-uploader.js",

src/Dropzone.js

@@ -14,6 +14,7 @@ class Dropzone extends React.Component {
     super(props)
     this.state = {
       active: false,
+      dragged: [],
     }
     this._files = [] // fileWithMeta objects: { file, meta }
     this._mounted = true
@@ -34,28 +35,28 @@ class Dropzone extends React.Component {
   handleDragEnter = (e) => {
     e.preventDefault()
     e.stopPropagation()
-    this.setState({ active: true })
+    this.setState({ active: true, dragged: (e.dataTransfer && Array.from(e.dataTransfer.items)) || [] })
   }
 
   handleDragOver = (e) => {
     e.preventDefault()
     e.stopPropagation()
     clearTimeout(this._dragTimeoutId)
-    this.setState({ active: true })
+    this.setState({ active: true, dragged: (e.dataTransfer && Array.from(e.dataTransfer.items)) || [] })
   }
 
   handleDragLeave = (e) => {
     e.preventDefault()
     e.stopPropagation()
     // prevents repeated toggling of `active` state when file is dragged over children of uploader
     // see: https://www.smashingmagazine.com/2018/01/drag-drop-file-uploader-vanilla-js/
-    this._dragTimeoutId = setTimeout(() => this.setState({ active: false }), 150)
+    this._dragTimeoutId = setTimeout(() => this.setState({ active: false, dragged: [] }), 150)
   }
 
   handleDrop = (e) => {
     e.preventDefault()
     e.stopPropagation()
-    this.setState({ active: false })
+    this.setState({ active: false, dragged: [] })
 
     const { dataTransfer: { files } } = e
     this.handleFiles([...files])
@@ -301,7 +302,7 @@ class Dropzone extends React.Component {
       styles,
       addClassNames,
     } = this.props
-    const { active } = this.state
+    const { active, dragged } = this.state
 
     const Input = InputComponent || InputDefault
     const Preview = PreviewComponent || PreviewDefault
@@ -313,6 +314,7 @@ class Dropzone extends React.Component {
         dropzone: dropzoneClassName,
         dropzoneWithFiles: dropzoneWithFilesClassName,
         dropzoneActive: dropzoneActiveClassName,
+        dropzoneReject: dropzoneRejectClassName,
         input: inputClassName,
         inputLabel: inputLabelClassName,
         inputLabelWithFiles: inputLabelWithFilesClassName,
@@ -325,6 +327,7 @@ class Dropzone extends React.Component {
         dropzone: dropzoneStyle,
         dropzoneWithFiles: dropzoneWithFilesStyle,
         dropzoneActive: dropzoneActiveStyle,
+        dropzoneReject: dropzoneRejectStyle,
         input: inputStyle,
         inputLabel: inputLabelStyle,
         inputLabelWithFiles: inputLabelWithFilesStyle,
@@ -335,7 +338,8 @@ class Dropzone extends React.Component {
       },
     } = mergeStyles(classNames, styles, addClassNames)
 
-    const extra = { active, accept, multiple, minSizeBytes, maxSizeBytes, maxFiles }
+    const draggedReject = dragged.some(file => file.type !== 'application/x-moz-file' && !accepts(file, accept))
+    const extra = { active, dragged, draggedReject, accept, multiple, minSizeBytes, maxSizeBytes, maxFiles }
 
     const files = [...this._files]
     let previews = null
@@ -392,30 +396,33 @@ class Dropzone extends React.Component {
       />
     ) : null
 
-    const dropzoneBaseClassName = files.length > 0 ? dropzoneWithFilesClassName : dropzoneClassName
-    const dropzoneBaseStyle = files.length > 0 ? dropzoneWithFilesStyle : dropzoneStyle
+    let className = files.length > 0 ? dropzoneWithFilesClassName : dropzoneClassName
+    let style = files.length > 0 ? dropzoneWithFilesStyle : dropzoneStyle
+    if (draggedReject) {
+      className = `${className} ${dropzoneRejectClassName}`
+      style = { ...(style || {}), ...(dropzoneRejectStyle || {}) }
+    } else if (active) {
+      className = `${className} ${dropzoneActiveClassName}`
+      style = { ...(style || {}), ...(dropzoneActiveStyle || {}) }
+    }
+
     return (
       <Layout
         input={input}
         previews={previews}
         submitButton={submitButton}
         dropzoneProps={{
           ref: this._dropzone,
-          className: active ? `${dropzoneBaseClassName} ${dropzoneActiveClassName}` : dropzoneBaseClassName,
-          style: active ? { ...(dropzoneBaseStyle || {}), ...(dropzoneActiveStyle || {}) } : dropzoneBaseStyle,
+          className,
+          style,
           onDragEnter: this.handleDragEnter,
           onDragOver: this.handleDragOver,
           onDragLeave: this.handleDragLeave,
           onDrop: this.handleDrop,
         }}
         files={files}
         extra={{
-          active,
-          accept,
-          multiple,
-          minSizeBytes,
-          maxSizeBytes,
-          maxFiles,
+          ...extra,
           canCancel,
           canRemove,
           canRestart,

src/Input.js

@@ -50,6 +50,8 @@ Input.propTypes = {
   files: PropTypes.arrayOf(PropTypes.any).isRequired,
   extra: PropTypes.shape({
     active: PropTypes.bool.isRequired,
+    dragged: PropTypes.arrayOf(PropTypes.any).isRequired,
+    draggedReject: PropTypes.bool.isRequired,
     accept: PropTypes.string.isRequired,
     multiple: PropTypes.bool.isRequired,
     minSizeBytes: PropTypes.number.isRequired,

src/Preview.js

@@ -119,6 +119,8 @@ Preview.propTypes = {
   files: PropTypes.arrayOf(PropTypes.any).isRequired, // eslint-disable-line react/no-unused-prop-types
   extra: PropTypes.shape({
     active: PropTypes.bool.isRequired,
+    dragged: PropTypes.arrayOf(PropTypes.any).isRequired,
+    draggedReject: PropTypes.bool.isRequired,
     accept: PropTypes.string.isRequired,
     multiple: PropTypes.bool.isRequired,
     minSizeBytes: PropTypes.number.isRequired,

src/SubmitButton.js

@@ -44,6 +44,8 @@ SubmitButton.propTypes = {
   files: PropTypes.arrayOf(PropTypes.object).isRequired,
   extra: PropTypes.shape({
     active: PropTypes.bool.isRequired,
+    dragged: PropTypes.arrayOf(PropTypes.any).isRequired,
+    draggedReject: PropTypes.bool.isRequired,
     accept: PropTypes.string.isRequired,
     multiple: PropTypes.bool.isRequired,
     minSizeBytes: PropTypes.number.isRequired,

src/styles.css

@@ -45,7 +45,8 @@
   justify-content: center;
   align-items: center;
   align-self: flex-start;
-  padding: 8px 14px;
+  padding: 0 14px;
+  min-height: 32px;
   background-color: #E6E6E6;
   color: #2484FF;
   border: none;
@@ -55,7 +56,6 @@
   font-weight: 600;
   margin-top: 20px;
   margin-left: 3%;
-  min-height: 16px;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   cursor: pointer;
@@ -111,7 +111,8 @@
 }
 
 .dzu-submitButton {
-  padding: 8px 14px;
+  padding: 0 14px;
+  min-height: 32px;
   background-color: #2484FF;
   border: none;
   border-radius: 4px;

src/utils.js

@@ -42,6 +42,7 @@ export const defaultClassNames = {
   dropzone: 'dzu-dropzone',
   dropzoneWithFiles: 'dzu-dropzone',
   dropzoneActive: 'dzu-dropzoneActive',
+  dropzoneReject: 'dzu-dropzoneActive',
   input: 'dzu-input',
   inputLabel: 'dzu-inputLabel',
   inputLabelWithFiles: 'dzu-inputLabelWithFiles',

website/pages/en/index.js

@@ -101,7 +101,7 @@ const Installation = () => (
   <div className="productShowcaseSection paddingBottom">
     <h2>Installation</h2>
     <MarkdownBlock>React Dropzone Uploader requires **React 16.2.0 or later.**</MarkdownBlock>
-    <MarkdownBlock>``` npm install --save react-dropzone-uploader ```</MarkdownBlock>
+    <MarkdownBlock>```npm install --save react-dropzone-uploader```</MarkdownBlock>
   </div>
 );
 

website/siteConfig.js

@@ -51,8 +51,8 @@ const siteConfig = {
   cleanUrl: true,
 
   // Open Graph and Twitter card images.
-  ogImage: 'img/docusaurus.png',
-  twitterImage: 'img/docusaurus.png',
+  ogImage: 'img/favicon.png',
+  twitterImage: 'img/favicon.png',
 
   cname: 'react-dropzone-uploader.js.org',
   algolia: {