diff --git a/README.md b/README.md index 855a101..69e0d3f 100644 --- a/README.md +++ b/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' }) ``` diff --git a/src/DropNCrop.js b/src/DropNCrop.js index 57cb48b..d7a1ff9 100644 --- a/src/DropNCrop.js +++ b/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 =>

{error}

)} : null} }