Implement drag and drop to upload file

Author: Correct-Syntax

src/app/page.js

@@ -92,11 +92,21 @@ export default function Home() {
     setDarkMode(!darkMode);
   }
 
-  function handleFileUpload(e) {
-    var uploadedFile = e.target.files[0];
-    if (/\.(jpe?g|png)$/i.test(uploadedFile.name) === true) {
+  function handleFileUpload(event) {
+    const uploadedFile = event.target.files[0];
+    setNewFile(uploadedFile);
+  }
+
+  function handleFileDrop(event) {
+    event.preventDefault();
+    const droppedFiles = event.dataTransfer.files;
+    setNewFile(droppedFiles[0]);
+  };
+
+  function setNewFile(file) {
+    if (/\.(jpe?g|png)$/i.test(file.name) === true) {
       setFileIsValid(true);
-      setFile(URL.createObjectURL(uploadedFile));
+      setFile(URL.createObjectURL(file));
     } else {
       setFileIsValid(false);
     }
@@ -144,7 +154,7 @@ export default function Home() {
       </nav>
 
       <main id="main" className="flex justify-center items-center py-6">
-        {file == null ? <UploadArea fileIsValid={fileIsValid} onFileUpload={handleFileUpload}></UploadArea> :
+        {file == null ? <UploadArea fileIsValid={fileIsValid} onFileUpload={handleFileUpload} onFileDrop={handleFileDrop}></UploadArea> :
           <ImageCanvas file={file} imageFilters={imageFilters} gridMode={gridMode}></ImageCanvas>}
       </main>
     </div>

src/components/UploadArea.js

@@ -3,9 +3,10 @@ import {
     UploadIcon,
 } from "@radix-ui/react-icons";
 
-export default function UploadArea({ fileIsValid, onFileUpload }) {
+export default function UploadArea({ fileIsValid, onFileUpload, onFileDrop }) {
     return (
-        <div id="uploadArea" className="flex justify-center px-5 mx-5 transition duration-300 ease-in-out cursor-pointer group bg-foreground/15 hover:bg-foreground/10 dark:bg-foreground dark:hover:bg-foreground/90 outline-dashed outline-gray dark:outline-gray/30 dark:hover:outline-gray/40 outline-2 outline-offset-2">
+        <div id="uploadArea" onDrop={(event) => onFileDrop(event)}
+            onDragOver={(event) => event.preventDefault()} className="flex justify-center px-5 mx-5 transition duration-300 ease-in-out cursor-pointer group bg-foreground/15 hover:bg-foreground/10 dark:bg-foreground dark:hover:bg-foreground/90 outline-dashed outline-gray dark:outline-gray/30 dark:hover:outline-gray/40 outline-2 outline-offset-2">
             <label htmlFor="dropzone" className="flex flex-col justify-center text-center cursor-pointer">
                 <UploadIcon className="mx-auto w-12 h-12 transition duration-300 ease-in-out rotate-3 group-hover:rotate-0 text-foreground/50 dark:text-gray"></UploadIcon>
                 <h2 className="mt-4 text-2xl font-bold text-foreground/50 dark:text-gray">Click to upload or drag and drop</h2>