From b6fb44d6a51aac748479c2a1d7a80255f35cce1b Mon Sep 17 00:00:00 2001
From: Lucian <lucian.buzzo@gmail.com>
Date: Wed, 4 Dec 2019 12:39:01 +0000
Subject: [PATCH] Fix bug where images can't be reselected

Signed-off-by: Lucian <lucian.buzzo@gmail.com>
---
 .../image-selector/image-selector.jsx         | 101 +++++++++---------
 1 file changed, 51 insertions(+), 50 deletions(-)

diff --git a/lib/gui/app/components/image-selector/image-selector.jsx b/lib/gui/app/components/image-selector/image-selector.jsx
index 2f29ec2f..c23c34dc 100644
--- a/lib/gui/app/components/image-selector/image-selector.jsx
+++ b/lib/gui/app/components/image-selector/image-selector.jsx
@@ -118,6 +118,7 @@ class ImageSelector extends React.Component {
   }
 
   reselectImage () {
+    console.log('reselecting image')
     analytics.logEvent('Reselect image', {
       previousImage: selectionState.getImage(),
       applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
@@ -299,59 +300,59 @@ class ImageSelector extends React.Component {
 
     return (
       <ThemedProvider>
-        <Dropzone multiple={false} noClick onDrop={this.handleOnDrop}>
-          {({ getRootProps, getInputProps }) => (
-            <div className="box text-center relative" {...getRootProps()}>
-              <input {...getInputProps()} />
-              <div className="center-block">
+        <div className="box text-center relative">
+          <Dropzone multiple={false} onDrop={this.handleOnDrop}>
+            {({ getRootProps, getInputProps }) => (
+              <div className="center-block" {...getRootProps()}>
+                <input {...getInputProps()} />
                 <SVGIcon contents={selectionState.getImageLogo()} paths={[ '../../assets/image.svg' ]} />
               </div>
+            )}
+          </Dropzone>
 
-              <div className="space-vertical-large">
-                {hasImage ? (
-                  <React.Fragment>
-                    <StepNameButton
-                      plain
-                      onClick={showSelectedImageDetails}
-                      tooltip={imageBasename}
-                    >
-                      {/* eslint-disable no-magic-numbers */}
-                      { middleEllipsis(imageName || imageBasename, 20) }
-                    </StepNameButton>
-                    { !flashing &&
-                      <ChangeButton
-                        plain
-                        mb={14}
-                        onClick={this.reselectImage}
-                      >
-                        Change
-                      </ChangeButton>
-                    }
-                    <DetailsText>
-                      {shared.bytesToClosestUnit(imageSize)}
-                    </DetailsText>
-                  </React.Fragment>
-                ) : (
-                  <StepSelection>
-                    <StepButton
-                      onClick={this.openImageSelector}
-                    >
-                      Select image
-                    </StepButton>
-                    <Footer>
-                      { mainSupportedExtensions.join(', ') }, and{' '}
-                      <Underline
-                        tooltip={ extraSupportedExtensions.join(', ') }
-                      >
-                        many more
-                      </Underline>
-                    </Footer>
-                  </StepSelection>
-                )}
-              </div>
-            </div>
-          )}
-        </Dropzone>
+          <div className="space-vertical-large">
+            {hasImage ? (
+              <React.Fragment>
+                <StepNameButton
+                  plain
+                  onClick={showSelectedImageDetails}
+                  tooltip={imageBasename}
+                >
+                  {/* eslint-disable no-magic-numbers */}
+                  { middleEllipsis(imageName || imageBasename, 20) }
+                </StepNameButton>
+                { !flashing &&
+                  <ChangeButton
+                    plain
+                    mb={14}
+                    onClick={this.reselectImage}
+                  >
+                    Change
+                  </ChangeButton>
+                }
+                <DetailsText>
+                  {shared.bytesToClosestUnit(imageSize)}
+                </DetailsText>
+              </React.Fragment>
+            ) : (
+              <StepSelection>
+                <StepButton
+                  onClick={this.openImageSelector}
+                >
+                  Select image
+                </StepButton>
+                <Footer>
+                  { mainSupportedExtensions.join(', ') }, and{' '}
+                  <Underline
+                    tooltip={ extraSupportedExtensions.join(', ') }
+                  >
+                    many more
+                  </Underline>
+                </Footer>
+              </StepSelection>
+            )}
+          </div>
+        </div>
 
         {Boolean(this.state.warning) && (
           <Modal