test upload file to server

client-electron/src/pages/upload.tsx

@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react'
+import Uppy from '@uppy/core'
+import { Dashboard } from '@uppy/react'
+import GoldenRetriever from '@uppy/golden-retriever'
+import Tus from '@uppy/tus'
+
+import '@uppy/core/dist/style.min.css'
+import '@uppy/dashboard/dist/style.min.css'
+import axios from 'axios'
+
+const UploadPage: React.FC = () => {
+  const [uppy] = useState(() =>
+    new Uppy().use(GoldenRetriever, { serviceWorker: true }).use(Tus, {
+      endpoint: import.meta.env.TAOBIN_RECIPE_MANAGER_TUS_SERVER_URL ?? 'http://localhost:8090/files/',
+      withCredentials: true
+    })
+  )
+
+  const [files, setFiles] = useState([])
+
+  async function getFiles() {
+    const files = await axios.get('http://localhost:8090/list').then(res => res.data)
+    console.log(files)
+    setFiles(files)
+  }
+
+  useEffect(() => {
+    getFiles()
+  }, [])
+  uppy.on('upload-success', () => {
+    getFiles()
+  })
+
+  return (
+    <div className="flex justify-between items-center">
+      <Dashboard uppy={uppy} proudlyDisplayPoweredByUppy={false} showProgressDetails={true} />
+      <div className="flex flex-col">
+        {files.map((file, index) => (
+          <div key={index}>{JSON.stringify(file)}</div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default UploadPage