feat: add uploading support

Author: haodong404

frontend/src/api/api.ts

@@ -1,5 +1,5 @@
 import { checkPwd } from "../utils/useAuthorization";
-import { getOrMock } from "./basic";
+import { getOrMock, post } from "./basic";
 import { listPicturesOk, partitionsOk } from "./mocks";
 import { ListResponse, Resolve } from "./models";
 
@@ -46,3 +46,11 @@ export function auth(password: string) {
     }
   );
 }
+
+export function upload(image: File, partition: string) {
+  const param = new FormData();
+  param.append("file", image, "new-image");
+  return post<Resolve>(`/${partition}/upload`, null, param, Number.MAX_VALUE, {
+    "Content-Type": "multipart/form-data",
+  });
+}

frontend/src/api/basic.ts

@@ -60,3 +60,34 @@ export function getOrMock<T>(
     }
   });
 }
+
+export function post<T>(
+  path: string,
+  query?: QueryParams,
+  data?: any,
+  timeout?: number,
+  headers?: Record<string, string>
+): Promise<T> {
+  return new Promise((resolve, reject) => {
+    myAxios({
+      url: path,
+      method: "post",
+      params: query,
+      data,
+      headers,
+      timeout,
+    })
+      .then((res) => {
+        if (res.status == 403) {
+          // Re-login
+          refresh();
+          return;
+        }
+        const data = (res.data as any).data;
+        resolve(data);
+      })
+      .catch((e) => {
+        reject(e);
+      });
+  });
+}

frontend/src/view/Main.tsx

@@ -5,15 +5,16 @@ import {
   createSignal,
   ErrorBoundary,
   For,
+  Show,
   Suspense,
-  untrack,
 } from "solid-js";
 import { createStore, SetStoreFunction } from "solid-js/store";
-import { listPartitions, listPictures } from "../api/api";
+import { listPartitions, listPictures, upload } from "../api/api";
 import Loading from "../components/Loading";
 import Pagination from "../components/Pagination";
 import PictureCard from "../components/PictureCard";
 import Placeholder from "../components/Placeholder";
+import Button from "../components/Button";
 
 const PartitionSelector = (props: {
   current: string;
@@ -24,7 +25,7 @@ const PartitionSelector = (props: {
 }) => {
   const [partitions] = createResource(listPartitions);
   return (
-    <div class="relative pt-4">
+    <div class="relative">
       <Suspense fallback={<Loading />}>
         <select
           onChange={(event) => {
@@ -50,6 +51,33 @@ focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
   );
 };
 
+const Uploader = (props: {partition: string}) => {
+  const [image, setImage] = createSignal<File>();
+  const fetcher = (file: File) => upload(file, props.partition);
+
+  const [data] = createResource(image, fetcher);
+
+  return <form class="flex items-start gap-4" onSubmit={async (event) => {
+    event.preventDefault();
+    const file = event.target["image"].files[0];
+    setImage(file);
+  }}>
+    <div class="flex flex-col items-start gap-4">
+      <input name="image" type="file" />
+      <Button type="submit" disabled={data.loading}>Upload</Button>
+    </div>
+
+    <Show when={data()}>
+    <div>
+      <h3>Success!</h3>
+      <ul>
+        <For each={Array.from(Object.entries(data()))}>{([key, value]) => <li>{key}: <a href={value["url"]}>{value["url"]}</a></li>}</For>
+      </ul>
+    </div>
+    </Show>
+  </form>
+}
+
 export default function Main() {
   const navigate = useNavigate();
   const param = useParams();
@@ -71,8 +99,17 @@ export default function Main() {
         return <Placeholder text={e.toString()} />
       }}>
         <Suspense fallback={<Loading />}>
-          <section class="flex justify-end min-h-10">
-            <PartitionSelector current={store.partition} setter={setStore} />
+          <section class="flex justify-between items-end min-h-10 gap-4 pt-4">
+            <div>
+              <ErrorBoundary fallback={(e) => <p>{`${e}`}</p>}>
+              <Suspense fallback={<Loading />}>
+                <Uploader partition={store.partition} />
+              </Suspense>
+              </ErrorBoundary>
+            </div>
+            <div>
+              <PartitionSelector current={store.partition} setter={setStore} />
+            </div>
           </section>
           <section class="mt-4 min-h-96">
             <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6 ">

frontend/uno.config.ts

@@ -0,0 +1,20 @@
+// uno.config.ts
+import {
+    defineConfig,
+    presetUno,
+    presetWind  } from 'unocss'
+  
+  export default defineConfig({
+    shortcuts: [
+      // ...
+    ],
+    theme: {
+      colors: {
+        // ...
+      }
+    },
+    presets: [
+      presetUno(),
+      presetWind(),
+    ],
+  })

frontend/vite.config.ts

@@ -1,7 +1,6 @@
 import { defineConfig } from "vite";
 import solidPlugin from "vite-plugin-solid";
 import UnoCSS from "unocss/vite";
-import presetWind from "@unocss/preset-wind";
 import TOML from "@ltd/j-toml";
 import fs from "fs";
 
@@ -12,7 +11,7 @@ export default defineConfig({
   plugins: [
     solidPlugin(),
     UnoCSS({
-      presets: [presetWind()],
+      configFile: "./uno.config.ts"
     }),
   ],
 
@@ -24,7 +23,7 @@ export default defineConfig({
   server: {
     port: 3000,
     proxy: {
-      "/api/pictures": "http://localhost:8080",
+      "/api/pictures": "http://localhost:7709",
     },
   },
   build: {