added drop support: Just drop a file anywhere to use it

package.json

@@ -11,6 +11,7 @@
     "merge-images": "^2.0.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-dropzone": "^11.2.4",
     "react-scripts": "4.0.1",
     "web-vitals": "^0.2.4"
   },

src/App.css

@@ -91,3 +91,29 @@ button:hover,
 .labelButton span{
     vertical-align: middle;
 }
+
+
+.droparea{
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    font-weight: bold;
+    font-size: calc(10px + 10vmin);
+
+    background: rgba(20, 0, 34, 0.7);
+    backdrop-filter: blur(10px);
+
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+.droparea.active{
+    opacity: 1;
+}

src/App.js

@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback } from 'react'
 import './App.css'
 import download from 'downloadjs'
+import { useDropzone } from 'react-dropzone'
 import FrameChooser from './FrameChooser.js'
 import HeaderImage from './HeaderImage.svg'
 
@@ -18,7 +19,8 @@ function App() {
         setFrameURL(newFrameURL)
     }, [setFrameURL])
 
-    const handleImage = useCallback(files_event => {
+
+    const handleReadFile = useCallback(file => {
         const reader = new FileReader()
         reader.onload = reader_event => {
             const img = new Image()
@@ -52,8 +54,24 @@ function App() {
             img.src = reader_event.target.result
             setOriginalPhoto(reader_event.target.result)
         }
-        reader.readAsDataURL(files_event.target.files[0])
+        reader.readAsDataURL(file)
-    }, [setPhoto])
+    }, [])
+
+    const handleImage = useCallback(files_event => {
+        handleReadFile(files_event.target.files[0])
+    }, [handleReadFile])
+
+    const onDrop = useCallback(acceptedFiles => {
+        handleReadFile(acceptedFiles[0])
+    }, [handleReadFile])
+
+    const { isDragActive, getRootProps } = useDropzone({
+        onDrop,
+        accept: 'image/*',
+        maxFiles: 1,
+        noKeyboard: true,
+    })
+
 
     useEffect(() => {
         mergeImages([
@@ -66,9 +84,13 @@ function App() {
 
 
 return (
-    <div className="App">
+    <div className="App" {...getRootProps()}>
         <img src={HeaderImage} className="HeaderImage" alt="Volt Logo" />
 
+        <div className={isDragActive ? 'droparea active' : 'droparea'}>
+            Drop your photo here ...
+        </div>
+
         <h2>Choose your Photo:</h2>
         <p>It should best be a square image or your face in the middle. The photo is not saved and never leaves your computer.</p>
 

yarn.lock

@@ -2439,6 +2439,11 @@ atob@^2.1.2:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
+attr-accept@^2.2.1:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.2.2.tgz#646613809660110749e92f2c10833b70968d929b"
+  integrity sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==
+
 autoprefixer@^9.6.1:
   version "9.8.6"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.6.tgz#3b73594ca1bf9266320c5acf1588d74dea74210f"
@@ -4895,6 +4900,13 @@ file-loader@6.1.1:
     loader-utils "^2.0.0"
     schema-utils "^3.0.0"
 
+file-selector@^0.2.2:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.2.4.tgz#7b98286f9dbb9925f420130ea5ed0a69238d4d80"
+  integrity sha512-ZDsQNbrv6qRi1YTDOEWzf5J2KjZ9KMI1Q2SGeTkCJmNNW25Jg4TW4UMcmoqcg4WrAyKRcpBXdbWRxkfrOzVRbA==
+  dependencies:
+    tslib "^2.0.3"
+
 file-uri-to-path@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
@@ -8942,6 +8954,15 @@ react-dom@^17.0.1:
     object-assign "^4.1.1"
     scheduler "^0.20.1"
 
+react-dropzone@^11.2.4:
+  version "11.2.4"
+  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-11.2.4.tgz#391a8d2e41a8a974340f83524d306540192e3313"
+  integrity sha512-EGSvK2CxFTuc28WxwuJCICyuYFX8b+sRumwU6Bs6sTbElV2HtQkT0d6C+HEee6XfbjiLIZ+Th9uji27rvo2wGw==
+  dependencies:
+    attr-accept "^2.2.1"
+    file-selector "^0.2.2"
+    prop-types "^15.7.2"
+
 react-error-overlay@^6.0.8:
   version "6.0.8"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.8.tgz#474ed11d04fc6bda3af643447d85e9127ed6b5de"
@@ -10528,6 +10549,11 @@ tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
+tslib@^2.0.3:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.1.0.tgz#da60860f1c2ecaa5703ab7d39bc05b6bf988b97a"
+  integrity sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==
+
 tsutils@^3.17.1:
   version "3.17.1"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759"