fix: set isDragReject true when maxFiles rejects (#1020)

react-dropzone · Oct 28, 2020 · b4a1ac6 · b4a1ac6
1 parent 96e7c15
commit b4a1ac6
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 4 deletions.
diff --git a/src/index.js b/src/index.js
@@ -751,7 +751,7 @@ export function useDropzone(options = {}) {
   )
 
   const fileCount = draggedFiles.length
-  const isDragAccept = fileCount > 0 && allFilesAccepted({ files: draggedFiles, accept, minSize, maxSize, multiple })
+  const isDragAccept = fileCount > 0 && allFilesAccepted({ files: draggedFiles, accept, minSize, maxSize, multiple, maxFiles })
   const isDragReject = fileCount > 0 && !isDragAccept
 
   return {

diff --git a/src/index.spec.js b/src/index.spec.js
@@ -2097,9 +2097,11 @@ describe('useDropzone() hook', () => {
       const onDropRejectedSpy = jest.fn()
       const ui = (
         <Dropzone accept="image/*" onDrop={onDropSpy} onDropRejected={onDropRejectedSpy} multiple={true} maxFiles={1}>
-          {({ getRootProps, getInputProps }) => (
+          {({ getRootProps, getInputProps, isDragReject, isDragAccept }) => (
             <div {...getRootProps()}>
               <input {...getInputProps()} />
+               {isDragReject && 'dragReject'}
+               {isDragAccept && 'dragAccept'}
             </div>
           )}
         </Dropzone>
@@ -2109,6 +2111,10 @@ describe('useDropzone() hook', () => {
       fireDrop(dropzone, createDtWithFiles(images))
       await flushPromises(rerender, ui)
       expect(onDropRejectedSpy).toHaveBeenCalled()
+      fireDragEnter(dropzone, createDtWithFiles(images))
+      await flushPromises(rerender, ui)
+      expect(dropzone).toHaveTextContent('dragReject')
+      expect(dropzone).not.toHaveTextContent('dragAccept')
       expect(onDropSpy).toHaveBeenCalledWith([], [
         {
           file: images[0],

diff --git a/src/utils/index.js b/src/utils/index.js
@@ -59,8 +59,8 @@ function isDefined(value) {
   return value !== undefined && value !== null
 }
 
-export function allFilesAccepted({ files, accept, minSize, maxSize, multiple }) {
-  if (!multiple && files.length > 1) {
+export function allFilesAccepted({ files, accept, minSize, maxSize, multiple, maxFiles }) {
+  if ((!multiple && files.length > 1) || (multiple && maxFiles >= 1 &&  files.length > maxFiles) ) {
     return false;
   }
 

diff --git a/src/utils/index.spec.js b/src/utils/index.spec.js
@@ -230,6 +230,26 @@ it('rejects file when single accept criteria as array', () => {
 
 })
 
+describe('allFilesAccepted()', () => {
+  let utils
+  beforeEach(async done => {
+    utils = await import('./index')
+    done()
+  })
+  it('rejects file when multiple accept criteria', () => {
+    const files = [createFile('hamster.pdf', 100, 'application/pdf'),createFile('fish.pdf', 100, 'application/pdf')];
+    const images = [createFile('cats.gif', 1234, 'image/gif'), createFile('dogs.gif', 2345, 'image/jpeg')]
+    expect(utils.allFilesAccepted({ files, multiple: true})).toEqual(true)
+    expect(utils.allFilesAccepted({ files, multiple: true, maxFiles: 10 })).toEqual(true)
+    expect(utils.allFilesAccepted({ files, multiple: false, maxFiles: 10 })).toEqual(false)
+    expect(utils.allFilesAccepted({ files, multiple: true, accept:'image/jpeg' })).toEqual(false) 
+    expect(utils.allFilesAccepted({ files: images, multiple: true,accept:'image/*' })).toEqual(true) 
+    expect(utils.allFilesAccepted({ files, multiple: true, minSize: 110 })).toEqual(false)
+    expect(utils.allFilesAccepted({ files, multiple: true, maxSize: 99 })).toEqual(false)
+    expect(utils.allFilesAccepted({ files, multiple: true, maxFiles: 1 })).toEqual(false)
+  })
+})
+
 function createFile(name, size, type) {
   const file = new File([], name, { type })
   Object.defineProperty(file, 'size', {