Fix image drop zone, remove react-dropzone dependency

Changelog-entry: Fix image drop zone, remove react-dropzone dependency
Change-type: patch

lib/gui/app/components/image-selector/image-selector.tsx

@@ -19,7 +19,6 @@ import * as _ from 'lodash';
 import { GPTPartition, MBRPartition } from 'partitioninfo';
 import * as path from 'path';
 import * as React from 'react';
-import { default as Dropzone } from 'react-dropzone';
 import { Modal } from 'rendition';
 import { default as styled } from 'styled-components';
 
@@ -102,7 +101,7 @@ export class ImageSelector extends React.Component<
 
 		this.openImageSelector = this.openImageSelector.bind(this);
 		this.reselectImage = this.reselectImage.bind(this);
-		this.handleOnDrop = this.handleOnDrop.bind(this);
+		this.onDrop = this.onDrop.bind(this);
 		this.showSelectedImageDetails = this.showSelectedImageDetails.bind(this);
 	}
 
@@ -286,14 +285,23 @@ export class ImageSelector extends React.Component<
 		}
 	}
 
-	private handleOnDrop(acceptedFiles: Array<{ path: string }>) {
+	private onDrop(event: React.DragEvent<HTMLDivElement>) {
-		const [file] = acceptedFiles;
+		const [file] = event.dataTransfer.files;
-
 		if (file) {
 			this.selectImageByPath(file.path);
 		}
 	}
 
+	private onDragOver(event: React.DragEvent<HTMLDivElement>) {
+		// Needed to get onDrop events on div elements
+		event.preventDefault();
+	}
+
+	private onDragEnter(event: React.DragEvent<HTMLDivElement>) {
+		// Needed to get onDrop events on div elements
+		event.preventDefault();
+	}
+
 	private showSelectedImageDetails() {
 		analytics.logEvent('Show selected image tooltip', {
 			imagePath: selectionState.getImagePath(),
@@ -321,18 +329,18 @@ export class ImageSelector extends React.Component<
 
 		return (
 			<>
-				<div className="box text-center relative">
+				<div
-					<Dropzone multiple={false} onDrop={this.handleOnDrop}>
+					className="box text-center relative"
-						{({ getRootProps, getInputProps }) => (
+					onDrop={this.onDrop}
-							<div className="center-block" {...getRootProps()}>
+					onDragEnter={this.onDragEnter}
-								<input {...getInputProps()} />
+					onDragOver={this.onDragOver}
-								<SVGIcon
+				>
-									contents={[selectionState.getImageLogo()]}
+					<div className="center-block">
-									paths={['../../assets/image.svg']}
+						<SVGIcon
-								/>
+							contents={[selectionState.getImageLogo()]}
-							</div>
+							paths={['../../assets/image.svg']}
-						)}
+						/>
-					</Dropzone>
+					</div>
 
 					<div className="space-vertical-large">
 						{hasImage ? (

npm-shrinkwrap.json

@@ -1578,11 +1578,6 @@
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
       "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
     },
-    "attr-accept": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.0.0.tgz",
-      "integrity": "sha512-I9SDP4Wvh2ItYYoafEg8hFpsBe96pfQ+eabceShXt3sw2fbIP96+Aoj9zZE0vkZNAkXXzHJATVRuWz+h9FxJxQ=="
-    },
     "aws-sign2": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
@@ -5864,14 +5859,6 @@
         "bluebird": "^3.5.3"
       }
     },
-    "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-type": {
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/file-type/-/file-type-8.1.0.tgz",
@@ -10585,28 +10572,6 @@
         "scheduler": "^0.17.0"
       }
     },
-    "react-dropzone": {
-      "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": "^2.0.0",
-        "file-selector": "^0.1.12",
-        "prop-types": "^15.7.2"
-      },
-      "dependencies": {
-        "prop-types": {
-          "version": "15.7.2",
-          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
-          "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
-          "requires": {
-            "loose-envify": "^1.4.0",
-            "object-assign": "^4.1.1",
-            "react-is": "^16.8.1"
-          }
-        }
-      }
-    },
     "react-google-recaptcha": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-2.0.1.tgz",

package.json

@@ -75,7 +75,6 @@
     "pretty-bytes": "^5.3.0",
     "react": "^16.8.5",
     "react-dom": "^16.8.5",
-    "react-dropzone": "^10.2.1",
     "redux": "^3.5.2",
     "rendition": "^11.24.0",
     "request": "^2.81.0",