Upgrade react-dropzone and review usage breaking changes

3 files changed, 25 insertions, 17 deletions

diff --git a/package-lock.json b/package-lock.json
index c432b9d27..9e73f97ec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6442,12 +6442,9 @@
       "dev": true
     },
     "attr-accept": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-1.1.3.tgz",
-      "integrity": "sha512-iT40nudw8zmCweivz6j58g+RT33I4KbaIvRUhjNmDwO2WmsQUxFEZZYZ5w3vXe5x5MX9D7mfvA/XaLOZYFR9EQ==",
-      "requires": {
-        "core-js": "^2.5.0"
-      }
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.0.0.tgz",
+      "integrity": "sha512-I9SDP4Wvh2ItYYoafEg8hFpsBe96pfQ+eabceShXt3sw2fbIP96+Aoj9zZE0vkZNAkXXzHJATVRuWz+h9FxJxQ=="
     },
     "auto-launch": {
       "version": "5.0.5",
@@ -12103,6 +12100,14 @@
         "object-assign": "^4.0.1"
       }
     },
+    "file-selector": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.1.12.tgz",
+      "integrity": "sha512-Kx7RTzxyQipHuiqyZGf+Nz4vY9R1XGxuQl/hLoJwq+J4avk/9wxxgZyHKtbyIPJmbD4A66DWGYfyykWNpcYutQ==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
     "file-uri-to-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
@@ -22315,12 +22320,13 @@
       }
     },
     "react-dropzone": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-7.0.1.tgz",
-      "integrity": "sha512-J4rbzhFZPVW7k7K9CVb0OcwSOJGLWa0y+0rvtB4rBLVkvq0agH/o3kPJ0DCkd6ZVzL2K1NFqIOvtQkwQKpmJBA==",
+      "version": "10.2.1",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-10.2.1.tgz",
+      "integrity": "sha512-Me5nOu8hK9/Xyg5easpdfJ6SajwUquqYR/2YTdMotsCUgJ1pHIIwNsv0n+qcIno0tWR2V2rVQtj2r/hXYs2TnQ==",
       "requires": {
-        "attr-accept": "^1.1.3",
-        "prop-types": "^15.6.2"
+        "attr-accept": "^2.0.0",
+        "file-selector": "^0.1.12",
+        "prop-types": "^15.7.2"
       }
     },
     "react-electron-web-view": {
diff --git a/package.json b/package.json
index 024537020..f0d630813 100644
--- a/package.json
+++ b/package.json
@@ -102,7 +102,7 @@
     "react-addons-css-transition-group": "15.6.2",
     "react-confetti": "5.0.1",
     "react-dom": "16.12.0",
-    "react-dropzone": "7.0.1",
+    "react-dropzone": "10.2.1",
     "react-electron-web-view": "^2.0.1",
     "react-intl": "2.7.2",
     "react-jss": "8.6.1",
diff --git a/src/components/ui/ImageUpload.js b/src/components/ui/ImageUpload.js
index 83a05554b..636d4fae3 100644
--- a/src/components/ui/ImageUpload.js
+++ b/src/components/ui/ImageUpload.js
@@ -89,14 +89,16 @@ export default @observer class ImageUpload extends Component {
             <Dropzone
               ref={(node) => { this.dropzoneRef = node; }}
               onDrop={this.onDrop.bind(this)}
-              className={cssClasses}
               multiple={multiple}
               accept="image/jpeg, image/png"
             >
-              <i className="mdi mdi-file-image" />
-              <p>
-                {textUpload}
-              </p>
+              {({ getRootProps, getInputProps }) => (
+                <div {...getRootProps()} className={cssClasses}>
+                  <i className="mdi mdi-file-image" />
+                  <p>{textUpload}</p>
+                  <input {...getInputProps()} />
+                </div>
+              )}
             </Dropzone>
           )}
         </div>