Added D&D, might extend it to whole area

package-lock.json

@@ -2562,6 +2562,11 @@
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
       "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
     },
+    "attr-accept": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.0.tgz",
+      "integrity": "sha512-Tee7K1V8BPZ3OS74UBk3I3e5wfSikSvjy2hb5UvnCJauA8gkg5MENw4dILT018rB3Lze1a3m93lhtJk7xFuAPQ=="
+    },
     "autoprefixer": {
       "version": "9.8.6",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.6.tgz",
@@ -5865,6 +5870,14 @@
         "schema-utils": "^2.5.0"
       }
     },
+    "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"
+      }
+    },
     "filename-reserved-regex": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-1.0.0.tgz",
@@ -10978,6 +10991,16 @@
         "scheduler": "^0.19.1"
       }
     },
+    "react-dropzone": {
+      "version": "11.0.2",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-11.0.2.tgz",
+      "integrity": "sha512-/Wde9Il1aJ1FtWllg3N2taIeJh4aftx6UGUG8R1TmLnZit2RnDcEjcKwEEbKwgLXTTh8QQpiZWQJq45jTy1jCA==",
+      "requires": {
+        "attr-accept": "^2.0.0",
+        "file-selector": "^0.1.12",
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-error-overlay": {
       "version": "6.0.7",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.7.tgz",

package.json

@@ -11,6 +11,7 @@
     "@testing-library/user-event": "^7.2.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-dropzone": "^11.0.2",
     "react-scripts": "3.4.1"
   },
   "scripts": {

src/ChecksumResolver.js

@@ -11,6 +11,8 @@ import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
 import Typography from '@material-ui/core/Typography';
 import Container from '@material-ui/core/Container';
 
+import Dropzone from 'react-dropzone'
+
 const useStyles = theme => ({
     paper: {
         marginTop: theme.spacing(8),
@@ -101,6 +103,24 @@ class ChecksumResolver extends React.Component {
             )
     }
 
+    buf2hex(buffer) { // buffer is an ArrayBuffer
+        return Array.prototype.map.call(new Uint8Array(buffer), x => ('00' + x.toString(16)).slice(-2)).join('');
+    }
+
+    acceptFile = async files =>{
+        const file = files[0];
+        if(!file.name.endsWith(".aax")){
+            alert('FileType not supported!');
+            return;
+        }
+
+        const slic = file.slice(653, 653 + 20);
+        const results = this.buf2hex(await slic.arrayBuffer());
+        this.setChecksum(results)
+        this.requestActivationBytes();
+
+    }
+
     render() {
         const { classes } = this.props;
         const { checksum, activationBytes } = this.state;
@@ -118,6 +138,19 @@ class ChecksumResolver extends React.Component {
                     </Typography>
 
                     <form className={classes.form} noValidate>
+                        <Dropzone
+                            noClick
+                            onDrop={acceptedFiles => {
+                                console.log(acceptedFiles);
+                                this.acceptFile(acceptedFiles);
+                                //const file = document.getElementById('fileInput').files[0];
+                                
+                               
+                            }}>
+                            {({ getRootProps, getInputProps }) => (
+                                <section>
+                                    <div {...getRootProps()}>
+                                        <input {...getInputProps()} />
                                         <TextField
                                             error={!this.isChecksumValid()}
                                             variant="outlined"
@@ -125,13 +158,18 @@ class ChecksumResolver extends React.Component {
                                             required
                                             fullWidth
                                             id="checksum"
-                            label="AAX Checksum"
+                                            label="Checksum or Drag&Drop .aax file"
                                             name="checksum"
                                             autoComplete="checksum"
                                             autoFocus
                                             onChange={(x) => this.setChecksum(x.target.value)}
                                             value={checksum}
+
                                         />
+                                    </div>
+                                </section>
+                            )}
+                        </Dropzone>
 
                         <Button
                             fullWidth