From f8b8f399ca2fc0b9ee68c38f6b3cf2b4407087d3 Mon Sep 17 00:00:00 2001
From: Nayam Amarshe <25067102+NayamAmarshe@users.noreply.github.com>
Date: Sat, 27 Aug 2022 16:05:05 +0530
Subject: [PATCH] Added reset button

---
 package.json             |  3 ---
 renderer/pages/index.jsx | 22 ++++++++++++++++++----
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 78384a3..2a7170a 100644
--- a/package.json
+++ b/package.json
@@ -113,9 +113,6 @@
       "target": [
         "nsis"
       ],
-      "asarUnpack": [
-        "**/node_modules/sharp/**"
-      ],
       "icon": "main/build/icon.png"
     },
     "files": [
diff --git a/renderer/pages/index.jsx b/renderer/pages/index.jsx
index 2a7b49b..df871bb 100644
--- a/renderer/pages/index.jsx
+++ b/renderer/pages/index.jsx
@@ -46,6 +46,7 @@ const Home = () => {
     });
 
     window.electron.on(commands.UPSCAYL_DONE, (_, data) => {
+      setProgress("");
       setUpscaledImagePath(data);
     });
   }, []);
@@ -80,6 +81,8 @@ const Home = () => {
     console.log("drag over");
   };
 
+  const allowedFileTypes = ["png", "jpg", "jpeg", "webp"];
+
   const handleDrop = (e) => {
     e.preventDefault();
     resetImagePaths();
@@ -87,10 +90,11 @@ const Home = () => {
     const type = e.dataTransfer.items[0].type;
     const filePath = e.dataTransfer.files[0].path;
     const extension = e.dataTransfer.files[0].name.split(".").at(-1);
+    console.log("🚀 => handleDrop => extension", extension);
 
     if (
-      !type.includes("image") &&
-      !["jpeg", "jpg", "png", "webp"].includes(extension.toLowerCase())
+      !type.includes("image") ||
+      !allowedFileTypes.includes(extension.toLowerCase())
     ) {
       alert("Please drag and drop an image");
     } else {
@@ -110,7 +114,7 @@ const Home = () => {
 
     if (
       !type.includes("image") &&
-      !["jpeg", "jpg", "png", "webp"].includes(extension.toLowerCase())
+      !allowedFileTypes.includes(extension.toLowerCase())
     ) {
       alert("Please drag and drop an image");
     } else {
@@ -146,6 +150,14 @@ const Home = () => {
   return (
     <div className="flex h-screen w-screen flex-row overflow-hidden bg-neutral-900">
       <div className="flex h-screen w-96 flex-col bg-neutral-800">
+        {imagePath.length > 0 && (
+          <button
+            className="absolute bottom-1 right-1 z-10 rounded-full bg-sky-400 p-2 opacity-50"
+            onClick={resetImagePaths}
+          >
+            Reset
+          </button>
+        )}
         {/* HEADER */}
         <h1 className="pl-5 pt-5 text-3xl font-bold text-neutral-50">
           Upscayl
@@ -231,8 +243,9 @@ const Home = () => {
             <button
               className="rounded-lg bg-sky-400 p-3"
               onClick={upscaylHandler}
+              disabled={progress.length > 0}
             >
-              Upscayl
+              {progress.length > 0 ? "Upscayling⏳" : "Upscayl"}
             </button>
           </div>
         </div>
@@ -300,6 +313,7 @@ const Home = () => {
             src={
               "file://" + `${upscaledImagePath ? upscaledImagePath : imagePath}`
             }
+            draggable="false"
             alt=""
           />
         ) : (