From 9e1f31e14c3a46d916cdff6e40e6f2b0d1551369 Mon Sep 17 00:00:00 2001
From: Nan Yu <thenanyu@gmail.com>
Date: Tue, 8 Dec 2020 19:32:41 -0800
Subject: [PATCH] fix: dropzone error on image upload component (#1711)

---
 app/scenes/Settings/components/ImageUpload.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/scenes/Settings/components/ImageUpload.js b/app/scenes/Settings/components/ImageUpload.js
index 9e5d5ac42..5f824bbbf 100644
--- a/app/scenes/Settings/components/ImageUpload.js
+++ b/app/scenes/Settings/components/ImageUpload.js
@@ -28,7 +28,7 @@ class ImageUpload extends React.Component<Props> {
   @observable isUploading: boolean = false;
   @observable isCropping: boolean = false;
   @observable zoom: number = 1;
-  file: File;
+  @observable file: File;
   avatarEditorRef: AvatarEditor;
 
   static defaultProps = {
@@ -128,7 +128,12 @@ class ImageUpload extends React.Component<Props> {
         style={EMPTY_OBJECT}
         disablePreview
       >
-        {this.props.children}
+        {({ getRootProps, getInputProps, isDragActive }) => (
+          <div {...getRootProps()} {...{ isDragActive }}>
+            <input {...getInputProps()} />
+            {this.props.children}
+          </div>
+        )}
       </Dropzone>
     );
   }