made the regex selector into a function and added documentation

This commit is contained in:
TGS963
2023-04-29 19:17:37 +05:30
parent 35f5ca01de
commit 172b2b8414

View File

@@ -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",