From 794eef61cdd1180eb8fd4a13a63791752b2c074d Mon Sep 17 00:00:00 2001
From: Danny McIntyre <dmmcinty@gmail.com>
Date: Mon, 9 Apr 2018 15:22:40 -0700
Subject: [PATCH 1/2] better fileSizeError custom message, updated readme

---
 README.md        |   2 +-
 src/DropNCrop.js | 120 +++++++++++++++++++++++++----------------------
 2 files changed, 64 insertions(+), 58 deletions(-)

diff --git a/README.md b/README.md
index 855a101..ab8f6af 100644
--- a/README.md
+++ b/README.md
@@ -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..a958a9f 100644
--- a/src/DropNCrop.js
+++ b/src/DropNCrop.js
@@ -53,10 +53,7 @@ class DropNCrop extends Component {
   };
 
   onCrop = () => {
-    const {
-      value,
-      onChange,
-    } = this.props;
+    const { value, onChange } = this.props;
 
     if (typeof this.cropperRef.getCroppedCanvas() !== 'undefined') {
       onChange({
@@ -73,11 +70,20 @@ class DropNCrop extends Component {
       allowedFileTypes,
       customMessage,
     } = this.props;
-    const fileSizeErrorMessage = customMessage.fileSizeErrorMessage 
-      ? customMessage.fileSizeErrorMessage + bytesToSize(maxFileSize) 
+    const fileSizeErrorMessage = customMessage.fileSizeErrorMessage
+      ? customMessage.fileSizeErrorMessage.replace(
+          '$BYTES',
+          bytesToSize(maxFileSize)
+        )
       : null;
-    const fileSizeValidation = fileSizeLessThan(maxFileSize, fileSizeErrorMessage)(files);
-    const fileTypeValidation = fileType(allowedFileTypes, customMessage.fileTypeErrorMessage)(files);
+    const fileSizeValidation = fileSizeLessThan(
+      maxFileSize,
+      fileSizeErrorMessage
+    )(files);
+    const fileTypeValidation = fileType(
+      allowedFileTypes,
+      customMessage.fileTypeErrorMessage
+    )(files);
 
     if (fileSizeValidation.isValid && fileTypeValidation.isValid) {
       const reader = new FileReader();
@@ -120,56 +126,56 @@ class DropNCrop extends Component {
 
     return (
       <div className={classNames(dropNCropClasses)}>
-        {value && value.src
-          ? <Cropper
-              ref={input => {
-                this.cropperRef = input;
-              }}
-              src={value && value.src}
-              style={{
-                height: canvasHeight,
-                width: canvasWidth,
-              }}
-              cropend={this.onCrop} // Only use the cropend method- it will reduce the callback/setState lag while cropping
-              {...cropperOptions}
-            />
-          : <Dropzone
-              className="dropzone"
-              activeClassName="dropzone--active"
-              onDrop={this.onDrop}
-              style={{
-                height: canvasHeight,
-                width: canvasWidth,
-              }}
-            >
-              <div key="dropzone-instructions">
-                {!instructions
-                  ? <div className="dropzone-instructions">
-                      <div className="dropzone-instructions--main">
-                        {customMessage.instructions}
-                      </div>
-                      <div className="dropzone-instructions--sub">
-                        {customMessage.acceptedFileTypes}
-                        {' '}
-                        {allowedFileTypes
-                          .map(mimeType => `.${mimeType.split('/')[1]}`)
-                          .join(', ')}
-                      </div>
-                      <div className="dropzone-instructions--sub">
-                        {customMessage.maxFileSize} {bytesToSize(maxFileSize)}
-                      </div>
-                    </div>
-                  : instructions}
-              </div>
-              {value && value.error
-                ? <div
-                    key="dropzone-validation"
-                    className="dropzone-validation"
-                  >
-                    {value && value.error}
+        {value && value.src ? (
+          <Cropper
+            ref={input => {
+              this.cropperRef = input;
+            }}
+            src={value && value.src}
+            style={{
+              height: canvasHeight,
+              width: canvasWidth,
+            }}
+            cropend={this.onCrop} // Only use the cropend method- it will reduce the callback/setState lag while cropping
+            {...cropperOptions}
+          />
+        ) : (
+          <Dropzone
+            className="dropzone"
+            activeClassName="dropzone--active"
+            onDrop={this.onDrop}
+            style={{
+              height: canvasHeight,
+              width: canvasWidth,
+            }}
+          >
+            <div key="dropzone-instructions">
+              {!instructions ? (
+                <div className="dropzone-instructions">
+                  <div className="dropzone-instructions--main">
+                    {customMessage.instructions}
+                  </div>
+                  <div className="dropzone-instructions--sub">
+                    {customMessage.acceptedFileTypes}{' '}
+                    {allowedFileTypes
+                      .map(mimeType => `.${mimeType.split('/')[1]}`)
+                      .join(', ')}
                   </div>
-                : null}
-            </Dropzone>}
+                  <div className="dropzone-instructions--sub">
+                    {customMessage.maxFileSize} {bytesToSize(maxFileSize)}
+                  </div>
+                </div>
+              ) : (
+                instructions
+              )}
+            </div>
+            {value && value.error ? (
+              <div key="dropzone-validation" className="dropzone-validation">
+                {value && value.error}
+              </div>
+            ) : null}
+          </Dropzone>
+        )}
       </div>
     );
   }

From 427a97fbcc73efb9c2b6ced61b5a31a31c9e8f60 Mon Sep 17 00:00:00 2001
From: Daniel McIntyre <dmmcinty@gmail.com>
Date: Mon, 9 Apr 2018 16:23:17 -0700
Subject: [PATCH 2/2] Un-prettier things

---
 src/DropNCrop.js | 120 ++++++++++++++++++++++-------------------------
 1 file changed, 57 insertions(+), 63 deletions(-)

diff --git a/src/DropNCrop.js b/src/DropNCrop.js
index a958a9f..714e4e2 100644
--- a/src/DropNCrop.js
+++ b/src/DropNCrop.js
@@ -53,7 +53,10 @@ class DropNCrop extends Component {
   };
 
   onCrop = () => {
-    const { value, onChange } = this.props;
+    const {
+      value,
+      onChange,
+    } = this.props;
 
     if (typeof this.cropperRef.getCroppedCanvas() !== 'undefined') {
       onChange({
@@ -70,20 +73,11 @@ class DropNCrop extends Component {
       allowedFileTypes,
       customMessage,
     } = this.props;
-    const fileSizeErrorMessage = customMessage.fileSizeErrorMessage
-      ? customMessage.fileSizeErrorMessage.replace(
-          '$BYTES',
-          bytesToSize(maxFileSize)
-        )
+    const fileSizeErrorMessage = customMessage.fileSizeErrorMessage 
+      ? customMessage.fileSizeErrorMessage.replace('$BYTES',bytesToSize(maxFileSize))
       : null;
-    const fileSizeValidation = fileSizeLessThan(
-      maxFileSize,
-      fileSizeErrorMessage
-    )(files);
-    const fileTypeValidation = fileType(
-      allowedFileTypes,
-      customMessage.fileTypeErrorMessage
-    )(files);
+    const fileSizeValidation = fileSizeLessThan(maxFileSize, fileSizeErrorMessage)(files);
+    const fileTypeValidation = fileType(allowedFileTypes, customMessage.fileTypeErrorMessage)(files);
 
     if (fileSizeValidation.isValid && fileTypeValidation.isValid) {
       const reader = new FileReader();
@@ -126,56 +120,56 @@ class DropNCrop extends Component {
 
     return (
       <div className={classNames(dropNCropClasses)}>
-        {value && value.src ? (
-          <Cropper
-            ref={input => {
-              this.cropperRef = input;
-            }}
-            src={value && value.src}
-            style={{
-              height: canvasHeight,
-              width: canvasWidth,
-            }}
-            cropend={this.onCrop} // Only use the cropend method- it will reduce the callback/setState lag while cropping
-            {...cropperOptions}
-          />
-        ) : (
-          <Dropzone
-            className="dropzone"
-            activeClassName="dropzone--active"
-            onDrop={this.onDrop}
-            style={{
-              height: canvasHeight,
-              width: canvasWidth,
-            }}
-          >
-            <div key="dropzone-instructions">
-              {!instructions ? (
-                <div className="dropzone-instructions">
-                  <div className="dropzone-instructions--main">
-                    {customMessage.instructions}
-                  </div>
-                  <div className="dropzone-instructions--sub">
-                    {customMessage.acceptedFileTypes}{' '}
-                    {allowedFileTypes
-                      .map(mimeType => `.${mimeType.split('/')[1]}`)
-                      .join(', ')}
-                  </div>
-                  <div className="dropzone-instructions--sub">
-                    {customMessage.maxFileSize} {bytesToSize(maxFileSize)}
-                  </div>
-                </div>
-              ) : (
-                instructions
-              )}
-            </div>
-            {value && value.error ? (
-              <div key="dropzone-validation" className="dropzone-validation">
-                {value && value.error}
+        {value && value.src
+          ? <Cropper
+              ref={input => {
+                this.cropperRef = input;
+              }}
+              src={value && value.src}
+              style={{
+                height: canvasHeight,
+                width: canvasWidth,
+              }}
+              cropend={this.onCrop} // Only use the cropend method- it will reduce the callback/setState lag while cropping
+              {...cropperOptions}
+            />
+          : <Dropzone
+              className="dropzone"
+              activeClassName="dropzone--active"
+              onDrop={this.onDrop}
+              style={{
+                height: canvasHeight,
+                width: canvasWidth,
+              }}
+            >
+              <div key="dropzone-instructions">
+                {!instructions
+                  ? <div className="dropzone-instructions">
+                      <div className="dropzone-instructions--main">
+                        {customMessage.instructions}
+                      </div>
+                      <div className="dropzone-instructions--sub">
+                        {customMessage.acceptedFileTypes}
+                        {' '}
+                        {allowedFileTypes
+                          .map(mimeType => `.${mimeType.split('/')[1]}`)
+                          .join(', ')}
+                      </div>
+                      <div className="dropzone-instructions--sub">
+                        {customMessage.maxFileSize} {bytesToSize(maxFileSize)}
+                      </div>
+                    </div>
+                  : instructions}
               </div>
-            ) : null}
-          </Dropzone>
-        )}
+              {value && value.error
+                ? <div
+                    key="dropzone-validation"
+                    className="dropzone-validation"
+                  >
+                    {value && value.error}
+                  </div>
+                : null}
+            </Dropzone>}
       </div>
     );
   }