Feat: add upload button (#18)

src/Editor.tsx

@@ -5,6 +5,7 @@ import { Help } from "./Help";
 import { useRegionContext } from "./Region";
 import { useAppStore } from "./store";
 import { type Point as PointId, type Quad } from "./store/editor";
+import { Upload } from "./Upload";
 import { v } from "./vector";
 
 type Point = { x: number; y: number };
@@ -41,6 +42,13 @@ const Toolbar = styled("div", {
   },
 });
 
+const Buttons = styled("div", {
+  base: {
+    display: "flex",
+    gap: "5px",
+  },
+});
+
 export function Editor() {
   const [store] = useAppStore().file;
 
@@ -75,10 +83,11 @@ export function EditorToolbar() {
         Size: {width()} x {height()} Current: {move.current().x},{" "}
         {move.current().y} Origin: {move.origin().x}, {move.origin().y}
       </div>
-      <div>
+      <Buttons>
+        <Upload />
         <Help />
         <Header />
-      </div>
+      </Buttons>
     </Toolbar>
   );
 }

src/Help.tsx

@@ -3,12 +3,6 @@ import { Show, createSignal } from "solid-js";
 import { Portal } from "solid-js/web";
 import { Button } from "./styles";
 
-const HelpButton = styled(Button, {
-  base: {
-    marginRight: "15px",
-  },
-});
-
 const Backdrop = styled("div", {
   base: {
     position: "absolute",
@@ -43,9 +37,9 @@ export function Help() {
 
   return (
     <>
-      <HelpButton title="Click to show help" onClick={() => setShown(true)}>
+      <Button title="Click to show help" onClick={() => setShown(true)}>
         Help
-      </HelpButton>
+      </Button>
       <Show when={shown()}>
         <Portal mount={document.body}>
           <Modal close={() => setShown(false)} />
@@ -61,7 +55,10 @@ function Modal(props: { close: () => void }) {
       <Backdrop onClick={() => props.close()} />
       <Content>
         <div>
-          <p>Drag and drop an image onto the app to upload.</p>
+          <p>
+            Drag and drop an image onto the app, or use Upload button to select
+            a file to upload.
+          </p>
           <br />
           <p>
             The <b>left region</b> is the uploaded image:

src/Upload.tsx

@@ -0,0 +1,32 @@
+import { createSignal } from "solid-js";
+import { useAppStore } from "./store";
+import { Button } from "./styles";
+
+export function Upload() {
+  const [_, { setFile }] = useAppStore().file;
+  const [input, setInput] = createSignal<HTMLInputElement>();
+
+  function show() {
+    input()?.click();
+  }
+
+  function upload() {
+    const file = input()?.files?.[0];
+    if (file) {
+      setFile(file);
+    }
+  }
+
+  return (
+    <>
+      <Button onClick={show}>Upload</Button>
+      <input
+        ref={setInput}
+        hidden
+        type="file"
+        accept="image/*"
+        onChange={upload}
+      />
+    </>
+  );
+}