fix(examples): rejectedFiles to fileRejections

Author: grahamsmt

examples/accept/README.md

@@ -14,38 +14,44 @@ import React from 'react';
 import {useDropzone} from 'react-dropzone';
 
 function Accept(props) {
-  const {acceptedFiles, rejectedFiles, getRootProps, getInputProps} = useDropzone({
+  const {
+    acceptedFiles,
+    fileRejections,
+    getRootProps,
+    getInputProps
+  } = useDropzone({
     accept: 'image/jpeg, image/png'
   });
-  
-  const acceptedFilesItems = acceptedFiles.map(file => (
+
+  const acceptedFileItems = acceptedFiles.map(file => (
     <li key={file.path}>
       {file.path} - {file.size} bytes
     </li>
   ));
 
-  const rejectedFilesItems = rejectedFiles.map(file => (
+  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'})}>
+      <div {...getRootProps({ className: 'dropzone' })}>
         <input {...getInputProps()} />
         <p>Drag 'n' drop some files here, or click to select files</p>
         <em>(Only *.jpeg and *.png images will be accepted)</em>
       </div>
       <aside>
         <h4>Accepted files</h4>
-        <ul>
-          {acceptedFilesItems}
-        </ul>
+        <ul>{acceptedFileItems}</ul>
         <h4>Rejected files</h4>
-        <ul>
-          {rejectedFilesItems}
-        </ul>
+        <ul>{fileRejectionItems}</ul>
       </aside>
     </section>
   );

src/index.spec.js

@@ -1920,29 +1920,49 @@ describe('useDropzone() hook', () => {
       expect(onDropSpy).toHaveBeenCalledWith(files, [], expect.anything())
     })
 
-    it('sets {acceptedFiles, rejectedFiles}', async () => {
-      const FileList = (props = { files: [] }) => (
+    it('sets {acceptedFiles, fileRejections}', async () => {
+      const FileList = ({ files = [] }) => (
         <ul>
-          {props.files.map(file => (
-            <li key={file.name} data-type={props.type}>
+          {files.map(file => (
+            <li key={file.name} data-type={'accepted'}>
               {file.name}
             </li>
           ))}
         </ul>
       )
 
+      const RejectedFileList = ({ fileRejections = [] }) => (
+        <ul>
+          {fileRejections.map(({ file, errors }) => (
+            <li key={file.name}>
+              <span data-type={"rejected"}>{file.name}</span>
+              <ul>
+                {errors.map(e => (
+                  <li key={e.code} data-type={"error"}>
+                    {e.code}
+                  </li>
+                ))}
+              </ul>
+            </li>
+          ))}
+        </ul>
+      )
+
       const getAcceptedFiles = node => node.querySelectorAll(`[data-type="accepted"]`)
       const getRejectedFiles = node => node.querySelectorAll(`[data-type="rejected"]`)
+      const getRejectedFilesErrors = node => node.querySelectorAll(`[data-type="error"]`)
       const matchToFiles = (fileList, files) =>
         Array.from(fileList).every(item => !!files.find(file => file.name === item.textContent))
+      const matchToErrorCode = (errorList, code) =>
+        Array.from(errorList).every(item => item.textContent === code)
 
       const ui = (
         <Dropzone accept="image/*">
           {({ getRootProps, getInputProps, acceptedFiles, fileRejections }) => (
             <div {...getRootProps()}>
               <input {...getInputProps()} />
-              <FileList files={acceptedFiles} type="accepted" />
-              <FileList files={fileRejections.map(rejection => rejection.file)} type="rejected" />
+              <FileList files={acceptedFiles} />
+              <RejectedFileList fileRejections={fileRejections} />
             </div>
           )}
         </Dropzone>
@@ -1961,8 +1981,12 @@ describe('useDropzone() hook', () => {
       const rejectedFileList = getRejectedFiles(dropzone)
       expect(rejectedFileList).toHaveLength(files.length)
       expect(matchToFiles(rejectedFileList, files)).toBe(true)
+      const rejectedFileErrorList = getRejectedFilesErrors(dropzone)
+      expect(rejectedFileErrorList).toHaveLength(files.length)
+      expect(matchToErrorCode(rejectedFileErrorList, 'file-invalid-type')).toBe(true)
     })
 
+    
     it('resets {isDragActive, isDragAccept, isDragReject}', async () => {
       const ui = (
         <Dropzone>

typings/tests/all.tsx

@@ -6,8 +6,8 @@ export default class Test extends React.Component {
     return (
       <div>
         <Dropzone
-          onDrop={(acceptedFiles, rejectedFiles, event) =>
-            console.log(acceptedFiles, rejectedFiles, event)}
+          onDrop={(acceptedFiles, fileRejections, event) =>
+            console.log(acceptedFiles, fileRejections, event)}
           onDragEnter={event => console.log(event)}
           onDragOver={event => console.log(event)}
           onDragLeave={event => console.log(event)}

typings/tests/events.tsx

@@ -7,8 +7,8 @@ export class Events extends React.Component {
       <section>
         <div className="dropzone">
           <Dropzone
-            onDrop={(acceptedFiles, rejectedFiles, event) =>
-              console.log(acceptedFiles, rejectedFiles, event)}
+            onDrop={(acceptedFiles, fileRejections, event) =>
+              console.log(acceptedFiles, fileRejections, event)}
             onDragEnter={event => console.log(event)}
             onDragOver={event => console.log(event)}
             onDragLeave={event => console.log(event)}