maxFiles and maxfilesexceeded not working

[alexanderwhatley]

I have the following code, similar to your example:

import React from 'react';
import ReactDOM from 'react-dom';
import DropzoneComponent from 'react-dropzone-component';

export default class Example extends React.Component {
        constructor(props) {
                super(props);

                // For a full list of possible configurations,
                // please consult http://www.dropzonejs.com/#configuration
                this.djsConfig = {
                        addRemoveLinks: true,
                        acceptedFiles: "image/jpeg,image/png,image/gif",
                        maxFiles: 1
                };

                this.componentConfig = {
                        iconFiletypes: ['.jpg', '.png', '.gif'],
                        showFiletypeIcon: true,
                        postUrl: '/uploadHandler'
                };

                // If you want to attach multiple callbacks, simply
                // create an array filled with all your callbacks.
                this.callbackArray = [() => console.log('Hi!'), () => console.log('Ho!')];

                // Simple callbacks work too, of course
                this.callback = () => console.log('Hello!');

                this.success = file => console.log('uploaded', file);

                this.removedfile = file => console.log('removing...', file);

                this.maxfilesexceeded = file => console.log("Max Files Exceeded");

                this.dropzone = null;
        }

        render() {
                const config = this.componentConfig;
                const djsConfig = this.djsConfig;

                // For a list of all possible events (there are many), see README.md!
                const eventHandlers = {
                        init: dz => this.dropzone = dz,
                        drop: this.callbackArray,
                        addedfile: this.callback,
                        success: this.success,
                        removedfile: this.removedfile
                }

                return <DropzoneComponent config={config} eventHandlers={eventHandlers} djsConfig={djsConfig} />
        }
}

However, the maxfilesexceeded never gets called. Do you know why? Thanks.

[ko]

I would venture to guess that your eventHandlers doesn't include a pointer to this.maxfilesexceeded.

If you refer to the example_default.jsx file, the diff I have is:

--- a/example/src/example_default.jsx
+++ b/example/src/example_default.jsx
@@ -10,7 +10,8 @@ export default class Example extends React.Component {
         // please consult http://www.dropzonejs.com/#configuration
         this.djsConfig = {
             addRemoveLinks: true,
-            acceptedFiles: "image/jpeg,image/png,image/gif"
+            acceptedFiles: "image/jpeg,image/png,image/gif",
+            maxFiles: 1,
         };

         this.componentConfig = {
@@ -31,6 +32,8 @@ export default class Example extends React.Component {
         this.removedfile = file => console.log('removing...', file);

         this.dropzone = null;
+
+        this.maxfilesexceeded = file => console.log("Max Files Exceeded");
     }

     render() {
@@ -43,7 +46,8 @@ export default class Example extends React.Component {
             drop: this.callbackArray,
             addedfile: this.callback,
             success: this.success,
-            removedfile: this.removedfile
+            removedfile: this.removedfile,
+            maxfilesexceeded: this.maxfilesexceeded,
         }

         return <DropzoneComponent config={config} eventHandlers={eventHandlers} djsConfig={djsConfig} />

Trying to add a second image results in seeing the console message "Max Files Exceeded".