new web init

2023-11-22 08:53:20 +08:00
parent a5c241ac02
commit 04c5dfece8
51 changed files with 11603 additions and 0 deletions
--- a/web_app/src/components/FileSelect.tsx
+++ b/web_app/src/components/FileSelect.tsx
@@ -0,0 +1,71 @@
+import React, { useState } from "react"
+import useResolution from "@/hooks/useResolution"
+
+type FileSelectProps = {
+  onSelection: (file: File) => void
+}
+
+export default function FileSelect(props: FileSelectProps) {
+  const { onSelection } = props
+
+  const [uploadElemId] = useState(`file-upload-${Math.random().toString()}`)
+
+  const resolution = useResolution()
+
+  function onFileSelected(file: File) {
+    if (!file) {
+      return
+    }
+    // Skip non-image files
+    const isImage = file.type.match("image.*")
+    if (!isImage) {
+      return
+    }
+    try {
+      // Check if file is larger than 20mb
+      if (file.size > 20 * 1024 * 1024) {
+        throw new Error("file too large")
+      }
+      onSelection(file)
+    } catch (e) {
+      // eslint-disable-next-line
+      alert(`error: ${(e as any).message}`)
+    }
+  }
+
+  return (
+    <div className="absolute flex w-screen h-screen justify-center items-center ">
+      <label
+        htmlFor={uploadElemId}
+        className="grid cursor-pointer border-[2px] border-[dashed] rounded-lg min-w-[600px] hover:cursor-pointer hover:bg-primary hover:text-primary-foreground"
+      >
+        <div
+          className="grid p-16 w-full h-full"
+          onDragOver={(ev) => {
+            ev.stopPropagation()
+            ev.preventDefault()
+          }}
+        >
+          <input
+            className="hidden"
+            id={uploadElemId}
+            name={uploadElemId}
+            type="file"
+            onChange={(ev) => {
+              const file = ev.currentTarget.files?.[0]
+              if (file) {
+                onFileSelected(file)
+              }
+            }}
+            accept="image/png, image/jpeg"
+          />
+          <p className="text-center">
+            {resolution === "desktop"
+              ? "Click here or drag an image file"
+              : "Tap here to load your picture"}
+          </p>
+        </div>
+      </label>
+    </div>
+  )
+}