From 5b76a0e89083c57188a70931ca4735250b6fb3a9 Mon Sep 17 00:00:00 2001
From: Andrew Marcuse <fileformat@gmail.com>
Date: Thu, 10 Oct 2024 14:27:51 -0400
Subject: [PATCH] Support loading from local file system

---
 app/components/Footer.tsx |  4 ++--
 app/routes/_index.tsx     | 23 ++++++++++++++++++++++-
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
index 0c79a4e..04964a4 100644
--- a/app/components/Footer.tsx
+++ b/app/components/Footer.tsx
@@ -49,10 +49,10 @@ export const Footer = () => {
               <img
                 src={link.icon}
                 alt={link.label}
-                style={{ height: "1.25em" }}
+                style={{ height: "1.75em", width: "1.75em" }}
               />
             </Box>
-            <Text>{link.label}</Text>
+                  <Text display={{ base: 'none', md: 'block' }}>{link.label}</Text>
           </Flex>
         </Link>
       ))}
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index 237b9e4..a40b46b 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@@ -15,6 +15,7 @@ import { FullPage } from "~/components/FullPage";
 
 import { t } from "~/utils/i18n";
 import { LinksFunction } from "@remix-run/node";
+import React from "react";
 
 export const meta: MetaFunction = () => {
     return [
@@ -31,6 +32,19 @@ export const links: LinksFunction = () => {
 
 export default function HomePage() {
     const bg = useColorModeValue("white", "gray.700");
+    const fileInput = React.useRef<HTMLInputElement>(null);
+
+    const onFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.item(0);
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = () => {
+                const url = reader.result as string;
+                window.location.href = `/view.html?url=${encodeURIComponent(url)}`;
+            };
+            reader.readAsDataURL(file);
+        }
+    }
 
     return (
         <FullPage>
@@ -43,10 +57,17 @@ export default function HomePage() {
                 <VStack as="form" align="left" spacing={4}>
                     <HStack>
                         <Button as={RemixLink} to={`/open.html`}>
-                            {t("Open")}
+                            {t("Open URL")}
                         </Button>
                         <Text>{t("view an SVG image from another website")}</Text>
                     </HStack>
+                    <HStack className="scriptonly">
+                        <input accept="image/svg+xml" onChange={onFileChange} type="file" style={{"display":"none"}} ref={fileInput} />
+                        <Button onClick={() => fileInput.current?.click()}>
+                            {t("Open File")}
+                        </Button>
+                        <Text>{t("view an SVG image from your computer")}</Text>
+                    </HStack>
                     <HStack>
                         <RemixLink prefetch="none" to={`/random.html?src=logosear.ch&zoom=max`} reloadDocument>
                             <Button>