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),
@@ -34,7 +36,7 @@ function Copyright() {
         <Typography variant="body2" color="textSecondary" align="center">
             {'Copyright © '}
             <Link color="inherit" href="https://audible-tools.github.io/">
-                    audible-tools
+                audible-tools
         </Link>{' '}
             {new Date().getFullYear()}
             {'.'}
@@ -85,7 +87,7 @@ class ChecksumResolver extends React.Component {
                     const { success, activationBytes } = result;
                     if (success === true) {
                         this.setState({ activationBytes: result.activationBytes });
-                    }else{
+                    } else {
                         this.setState({ activationBytes: 'UNKNOWN' });
                     }
 
@@ -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,20 +138,38 @@ class ChecksumResolver extends React.Component {
                     </Typography>
 
                     <form className={classes.form} noValidate>
-                        <TextField
+                        <Dropzone
-                            error={!this.isChecksumValid()}
+                            noClick
-                            variant="outlined"
+                            onDrop={acceptedFiles => {
-                            margin="normal"
+                                console.log(acceptedFiles);
-                            required
+                                this.acceptFile(acceptedFiles);
-                            fullWidth
+                                //const file = document.getElementById('fileInput').files[0];
-                            id="checksum"
+                                
-                            label="AAX Checksum"
+                               
-                            name="checksum"
+                            }}>
-                            autoComplete="checksum"
+                            {({ getRootProps, getInputProps }) => (
-                            autoFocus
+                                <section>
-                            onChange={(x) => this.setChecksum(x.target.value)}
+                                    <div {...getRootProps()}>
-                            value={checksum}
+                                        <input {...getInputProps()} />
-                        />
+                                        <TextField
+                                            error={!this.isChecksumValid()}
+                                            variant="outlined"
+                                            margin="normal"
+                                            required
+                                            fullWidth
+                                            id="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
@@ -151,7 +189,7 @@ class ChecksumResolver extends React.Component {
                             margin="normal"
                             fullWidth
                             id="activationBytes"
-                            label={activationBytes?'':"Activation Bytes"}
+                            label={activationBytes ? '' : "Activation Bytes"}
                             name="activationBytes"
                             autoComplete="activationBytes"
                             aria-readonly