Error as array

README.md

@@ -98,7 +98,7 @@ value: PropTypes.shape({
   filename: PropTypes.string, // Original filename from uploaded file
   filetype: PropTypes.string, // Original MIME type from uploaded file
   src: PropTypes.string, // Original DataURL from the FileReader.result
-  error: PropTypes.string, // Error returned from fileSize/fileType validators
+  error: PropTypes.array, // Error returned from fileSize/fileType validators
 }).isRequired,
 ```
 
@@ -111,7 +111,7 @@ customMessage: PropTypes.shape({
   instructions: PropTypes.string, // default: 'Drag-n-drop a file or click to add an image'
   acceptedFileTypes: PropTypes.string, // default: 'Accepted file types: '
   maxFileSize: PropTypes.string, // default: 'Max file size: '
-  fileTypeErrorMessage: PropTypes.string, // default: `File size must be less than $BYTES`
+  fileTypeErrorMessage: PropTypes.string, // default: 'File size must be less than $BYTES'. maxFileSize value can be referenced with '$BYTES'
   fileSizeErrorMessage: PropTypes.string, // default: 'Invalid file type'
 })
 ```

src/DropNCrop.js

@@ -31,7 +31,7 @@ class DropNCrop extends Component {
       filename: PropTypes.string,
       filetype: PropTypes.string,
       src: PropTypes.string,
-      error: PropTypes.string,
+      error: PropTypes.array,
     }),
   };
 
@@ -74,7 +74,7 @@ class DropNCrop extends Component {
       customMessage,
     } = this.props;
     const fileSizeErrorMessage = customMessage.fileSizeErrorMessage 
-      ? customMessage.fileSizeErrorMessage + bytesToSize(maxFileSize) 
+      ? customMessage.fileSizeErrorMessage.replace('$BYTES',bytesToSize(maxFileSize))
       : null;
     const fileSizeValidation = fileSizeLessThan(maxFileSize, fileSizeErrorMessage)(files);
     const fileTypeValidation = fileType(allowedFileTypes, customMessage.fileTypeErrorMessage)(files);
@@ -92,10 +92,11 @@ class DropNCrop extends Component {
       };
       reader.readAsDataURL(files[0]);
     } else {
+      const errors = [];
+      if(!fileTypeValidation.isValid) errors.push(fileTypeValidation.message);
+      if(!fileSizeValidation.isValid) errors.push(fileSizeValidation.message);
       onChange({
-        error: !fileTypeValidation.isValid
-          ? fileTypeValidation.message
-          : !fileSizeValidation.isValid ? fileSizeValidation.message : null, // TODO: Update error state to be an array to handle both messages if necessary
+        error: errors
       });
     }
   };
@@ -166,7 +167,7 @@ class DropNCrop extends Component {
                     key="dropzone-validation"
                     className="dropzone-validation"
                   >
-                    {value && value.error}
+                    {value && value.error && value.error.map(error => <p>{error}</p>)}
                   </div>
                 : null}
             </Dropzone>}