Implement drag and drop into existing photo to replace it

Author: Correct-Syntax

src/app/page.js

@@ -156,7 +156,7 @@ export default function Home() {
 
       <main id="main" className={`flex justify-center items-center py-6 ${isFullscreen ? "fullscreen" : ""}`}>
         {file == null ? <UploadArea fileIsValid={fileIsValid} onFileUpload={handleFileUpload} onFileDrop={handleFileDrop}></UploadArea> :
-          <ImageCanvas file={file} imageFilters={imageFilters} gridMode={gridMode}></ImageCanvas>}
+          <ImageCanvas file={file} imageFilters={imageFilters} gridMode={gridMode} onFileDrop={handleFileDrop}></ImageCanvas>}
       </main>
     </div>
   );

src/components/ImageCanvas.js

@@ -28,7 +28,7 @@ function gridClassesFromId(gridModeId) {
     }
 }
 
-export default function ImageCanvas({ file, imageFilters, gridMode }) {
+export default function ImageCanvas({ file, imageFilters, gridMode, onFileDrop }) {
     // List containing the one/two filter ids that are active.
     var activeIds = [];
     for (var i = 0; i < imageFilters.length; i++) {
@@ -38,7 +38,7 @@ export default function ImageCanvas({ file, imageFilters, gridMode }) {
     }
     var showSlider = imageFilters.filter(i => i == true).length > 1;
     return (
-        <div id="imageCanvas" className={`relative w-auto grid-overlay ${gridClassesFromId(gridMode)}`}>
+        <div onDrop={(event) => onFileDrop(event)} onDragOver={(event) => event.preventDefault()} id="imageCanvas" className={`relative w-auto grid-overlay ${gridClassesFromId(gridMode)}`}>
             <div id="horizontalTop" className="absolute z-40 w-full h-[1px] bg-white/50"></div>
             <div id="horizontalBottom" className="absolute z-40 w-full h-[1px] bg-white/50"></div>
             <div id="verticalLeft" className="absolute z-40 w-[1px] h-full bg-white/50"></div>