From 35f5ca01de1b9d691a4129360cba7e95b7e9fd90 Mon Sep 17 00:00:00 2001
From: TGS963 <ghoshsuvojit2012@gmail.com>
Date: Sat, 29 Apr 2023 15:01:33 +0530
Subject: [PATCH 1/2] fixed preview not working when filename has special
 characters

---
 renderer/pages/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/renderer/pages/index.tsx b/renderer/pages/index.tsx
index f5901ba..6cc4983 100644
--- a/renderer/pages/index.tsx
+++ b/renderer/pages/index.tsx
@@ -617,7 +617,7 @@ const Home = () => {
               <img
                 src={
                   "file://" +
-                  `${upscaledImagePath ? upscaledImagePath : imagePath}`
+                  `${upscaledImagePath ? upscaledImagePath.replace(/([^/\\]+)$/i, encodeURIComponent(upscaledImagePath.match(/[^/\\]+$/i)[0])) : imagePath.replace(/([^/\\]+)$/i, encodeURIComponent(imagePath.match(/[^/\\]+$/i)[0]))}`
                 }
                 onLoad={(e: any) => {
                   setDimensions({
@@ -674,7 +674,7 @@ const Home = () => {
                     </p>
 
                     <img
-                      src={"file://" + imagePath}
+                      src={"file:///" + imagePath.replace(/([^/\\]+)$/i, encodeURIComponent(imagePath.match(/[^/\\]+$/i)[0]))}
                       alt="Original"
                       onMouseMove={handleMouseMove}
                       style={{
@@ -692,7 +692,7 @@ const Home = () => {
                       Upscayled
                     </p>
                     <img
-                      src={"file://" + upscaledImagePath}
+                      src={"file://" + upscaledImagePath.replace(/([^/\\]+)$/i, encodeURIComponent(upscaledImagePath.match(/[^/\\]+$/i)[0]))}
                       alt="Upscayl"
                       style={{
                         objectFit: "contain",

From 172b2b8414818c63b00643397b36ab1a01b10d80 Mon Sep 17 00:00:00 2001
From: TGS963 <ghoshsuvojit2012@gmail.com>
Date: Sat, 29 Apr 2023 19:17:37 +0530
Subject: [PATCH 2/2] made the regex selector into a function and added
 documentation

---
 renderer/pages/index.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/renderer/pages/index.tsx b/renderer/pages/index.tsx
index 6cc4983..98b2cc5 100644
--- a/renderer/pages/index.tsx
+++ b/renderer/pages/index.tsx
@@ -478,6 +478,11 @@ const Home = () => {
     resetImagePaths();
   }
 
+  const formatPath = (path) => {
+    //USE REGEX TO GET THE FILENAME AND ENCODE IT INTO PROPER FORM IN ORDER TO AVOID ERRORS DUE TO SPECIAL CHARACTERS
+    return path.replace(/([^/\\]+)$/i, encodeURIComponent(path.match(/[^/\\]+$/i)[0]))
+  }
+
   const allowedFileTypes = ["png", "jpg", "jpeg", "webp"];
   const allowedVideoFileTypes = ["webm", "mp4", "mkv"];
 
@@ -617,7 +622,7 @@ const Home = () => {
               <img
                 src={
                   "file://" +
-                  `${upscaledImagePath ? upscaledImagePath.replace(/([^/\\]+)$/i, encodeURIComponent(upscaledImagePath.match(/[^/\\]+$/i)[0])) : imagePath.replace(/([^/\\]+)$/i, encodeURIComponent(imagePath.match(/[^/\\]+$/i)[0]))}`
+                  `${upscaledImagePath ? formatPath(upscaledImagePath) : formatPath(imagePath)}`
                 }
                 onLoad={(e: any) => {
                   setDimensions({
@@ -674,7 +679,7 @@ const Home = () => {
                     </p>
 
                     <img
-                      src={"file:///" + imagePath.replace(/([^/\\]+)$/i, encodeURIComponent(imagePath.match(/[^/\\]+$/i)[0]))}
+                      src={"file:///" + formatPath(imagePath)}
                       alt="Original"
                       onMouseMove={handleMouseMove}
                       style={{
@@ -692,7 +697,7 @@ const Home = () => {
                       Upscayled
                     </p>
                     <img
-                      src={"file://" + upscaledImagePath.replace(/([^/\\]+)$/i, encodeURIComponent(upscaledImagePath.match(/[^/\\]+$/i)[0]))}
+                      src={"file://" + formatPath(upscaledImagePath)}
                       alt="Upscayl"
                       style={{
                         objectFit: "contain",