Support loading from local file system

VectorLogoZone · Oct 10, 2024 · 5b76a0e · 5b76a0e
1 parent 43c2e81
commit 5b76a0e
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git 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
@@ -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>