File upload.

frontend/src/components/navigator.tsx

@@ -4,6 +4,7 @@ import {useNavigate, useOutlet} from "react-router";
 import {useEffect, useState} from "react";
 import {MdOutlinePerson, MdSearch, MdSettings} from "react-icons/md";
 import { useTranslation } from "react-i18next";
+import UploadingSideBar from "./uploading_side_bar.tsx";
 
 export default function Navigator() {
   const outlet = useOutlet()
@@ -20,6 +21,7 @@ export default function Navigator() {
         </div>
         <div className="flex gap-2">
           <SearchBar/>
+          <UploadingSideBar/>
           {
             app.isAdmin() && <button className={"btn btn-circle btn-ghost"} onClick={() => {
               navigate("/manage");

frontend/src/components/uploading_side_bar.tsx

@@ -0,0 +1,120 @@
+import {useEffect, useState} from "react";
+import {uploadingManager, UploadingTask} from "../network/uploading.ts";
+import {MdArrowUpward} from "react-icons/md";
+
+export default function UploadingSideBar() {
+  const [showUploading, setShowUploading] = useState(false);
+
+  useEffect(() => {
+    const listener = () => {
+      console.log("Uploading tasks changed; show uploading: ", uploadingManager.hasTasks());
+      setShowUploading(uploadingManager.hasTasks())
+    };
+
+    uploadingManager.addListener(listener)
+
+    return () => {
+      uploadingManager.removeListener(listener)
+    }
+  }, []);
+
+  if (!showUploading) {
+    return <></>
+  }
+
+  return <>
+    <label htmlFor={"uploading-drawer"} className={"btn btn-square btn-ghost relative btn-accent text-primary"}>
+      <div className={"w-6 h-6 overflow-hidden relative"}>
+        <MdArrowUpward className={"move-up-animation pb-0.5"} size={24}/>
+        <div className={"absolute border-b-2 w-5 bottom-1 left-0.5"}></div>
+      </div>
+    </label>
+    <div className="drawer w-0">
+      <input id="uploading-drawer" type="checkbox" className="drawer-toggle" />
+      <div className="drawer-side">
+        <label htmlFor="uploading-drawer" aria-label="close sidebar" className="drawer-overlay"></label>
+        <div className="menu bg-base-200 text-base-content h-full w-80 p-4 overflow-y-auto ">
+          <div className={"grid grid-cols-1"}>
+            <h2 className={"text-xl mb-2"}>Uploading</h2>
+            <UploadingList/>
+          </div>
+        </div>
+      </div>
+    </div>
+  </>
+}
+
+function UploadingList() {
+  const [tasks, setTasks] = useState(uploadingManager.getTasks());
+
+  useEffect(() => {
+    const listener = () => {
+      setTasks(uploadingManager.getTasks());
+    }
+
+    uploadingManager.addListener(listener)
+
+    return () => {
+      uploadingManager.removeListener(listener)
+    }
+  }, []);
+
+  return <>
+    {
+      tasks.map((task) => {
+        return <TaskTile key={task.id} task={task}/>
+      })
+    }
+  </>
+}
+
+function TaskTile({task}: {task: UploadingTask}) {
+  const [progress, setProgress] = useState(task.progress);
+
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const listener = () => {
+      setProgress(task.progress);
+      setError(task.errorMessage);
+    }
+
+    task.addListener(listener)
+
+    return () => {
+      task.removeListener(listener)
+    }
+  }, [task]);
+
+  return <div className={"card card-border border-base-300 p-2 my-2 w-full"}>
+    <p className={"p-1 mb-2 w-full break-all line-clamp-2"}>{task.filename}</p>
+    <progress className="progress progress-primary my-2" value={100 * progress} max={100}/>
+    {error && <p className={"text-error p-1"}>{error}</p>}
+    <div className={"my-2 flex flex-row-reverse"}>
+      <button className={"btn btn-error h-7"} onClick={() => {
+        const dialog = document.getElementById(`cancel_task_${task.id}`) as HTMLDialogElement;
+        dialog.showModal();
+      }}>
+        Cancel
+      </button>
+    </div>
+    <dialog id={`cancel_task_${task.id}`} className="modal">
+      <div className="modal-box">
+        <h3 className="text-lg font-bold">Cancel Task</h3>
+        <p className="py-4">Are you sure you want to cancel this task?</p>
+        <div className="modal-action">
+          <form method="dialog">
+            <button className="btn">Close</button>
+          </form>
+          <button className="btn btn-error mx-2" type={"button"} onClick={() => {
+            task.cancel();
+            const dialog = document.getElementById(`cancel_task_${task.id}`) as HTMLDialogElement;
+            dialog.close();
+          }}>
+            Confirm
+          </button>
+        </div>
+      </div>
+    </dialog>
+  </div>
+}

frontend/src/index.css

@@ -110,4 +110,18 @@ body {
 
 .animate-appearance-in {
     animation: appearance-in 250ms ease-out normal both;
+}
+
+.move-up-animation {
+    animation: moveUpAndDown 2s infinite;
+    position: relative;
+}
+
+@keyframes moveUpAndDown {
+    0% {
+        top: 0;
+    }
+    100% {
+        top: -100%;
+    }
 }

frontend/src/network/uploading.ts

@@ -1,9 +1,191 @@
 import {Response} from "./models.ts";
+import {network} from "./network.ts";
 
-class UploadingManager {
-  async addTask(file: File, resourceID: number, storageID: number, description: string): Promise<Response<void>> {
-    // TODO: implement this
-    throw new Error("Not implemented");
+enum UploadingStatus {
+  PENDING = "pending",
+  UPLOADING = "uploading",
+  DONE = "done",
+  ERROR = "error",
+}
+
+class Listenable {
+  listeners: (() => void)[] = [];
+
+  addListener(listener: () => void) {
+    this.listeners.push(listener);
+  }
+
+  removeListener(listener: () => void) {
+    this.listeners = this.listeners.filter(l => l !== listener);
+  }
+
+  notifyListeners() {
+    this.listeners.forEach(listener => listener());
+  }
+}
+
+export class UploadingTask extends Listenable {
+  id: number;
+  file: File;
+  blocks: boolean[];
+  blockSize: number;
+
+  status: UploadingStatus = UploadingStatus.PENDING;
+  errorMessage: string | null = null;
+  uploadingBlocks: number[] = [];
+  finishedBlocksCount: number = 0;
+
+  onFinished: (() => void);
+
+  get filename() {
+    return this.file.name;
+  }
+
+  get progress() {
+    if (this.blocks.length === 0) {
+      return 0;
+    }
+    return this.finishedBlocksCount / this.blocks.length;
+  }
+
+  constructor(id: number, file: File, blocksCount: number, blockSize: number, onFinished: () => void) {
+    super();
+    this.id = id;
+    this.file = file;
+    this.blocks = new Array(blocksCount).fill(false);
+    this.blockSize = blockSize;
+    this.onFinished = onFinished;
+  }
+
+  async upload(id: number) {
+    let index = 0;
+    while (index < this.blocks.length) {
+      if (this.blocks[index] || this.uploadingBlocks.includes(index)) {
+        index++;
+        continue;
+      }
+      if (this.status !== UploadingStatus.UPLOADING) {
+        return;
+      }
+      console.log(`${id}: uploading block ${index}`);
+      this.uploadingBlocks.push(index);
+      const start = index * this.blockSize;
+      const end = Math.min(start + this.blockSize, this.file.size);
+      const block = this.file.slice(start, end);
+      const data = await block.arrayBuffer();
+      let retries = 3;
+      while (true) {
+        const res = await network.uploadFileBlock(this.id, index, data);
+        if (!res.success) {
+          retries--;
+          if (retries === 0) {
+            this.status = UploadingStatus.ERROR;
+            this.errorMessage = res.message;
+            this.notifyListeners();
+            return;
+          }
+        } else {
+          break;
+        }
+      }
+      console.log(`${id}: uploaded block ${index}`);
+      this.blocks[index] = true;
+      this.finishedBlocksCount++;
+      this.uploadingBlocks = this.uploadingBlocks.filter(i => i !== index);
+      index++;
+      this.notifyListeners();
+    }
+  }
+
+  async start() {
+    this.status = UploadingStatus.UPLOADING;
+    this.notifyListeners();
+    await Promise.all([
+      this.upload(0),
+      this.upload(1),
+      this.upload(2),
+      this.upload(3),
+    ])
+    if (this.status !== UploadingStatus.UPLOADING) {
+      return;
+    }
+    const res = await network.finishFileUpload(this.id);
+    if (res.success) {
+      this.status = UploadingStatus.DONE;
+      this.notifyListeners();
+      this.onFinished();
+    } else {
+      this.status = UploadingStatus.ERROR;
+      this.errorMessage = res.message;
+      this.notifyListeners();
+    }
+  }
+
+  cancel() {
+    this.status = UploadingStatus.ERROR;
+    this.errorMessage = "Cancelled";
+    this.notifyListeners();
+    network.cancelFileUpload(this.id);
+  }
+}
+
+class UploadingManager extends Listenable {
+  tasks: UploadingTask[] = [];
+
+  onTaskStatusChanged = () =>  {
+    if (this.tasks.length === 0) {
+      return;
+    }
+    if (this.tasks[0].status === UploadingStatus.PENDING) {
+      this.tasks[0].start();
+    } else if (this.tasks[0].status === UploadingStatus.DONE) {
+      this.tasks[0].removeListener(this.onTaskStatusChanged);
+      this.tasks.shift();
+      this.onTaskStatusChanged();
+    } else if (this.tasks[0].status === UploadingStatus.ERROR && this.tasks[0].errorMessage === "Cancelled") {
+      this.tasks[0].removeListener(this.onTaskStatusChanged);
+      this.tasks.shift();
+      this.onTaskStatusChanged();
+    }
+    this.notifyListeners();
+  }
+
+  async addTask(file: File, resourceID: number, storageID: number, description: string, onFinished: () => void): Promise<Response<void>> {
+    const res = await network.initFileUpload(
+      file.name,
+      description,
+      file.size,
+      resourceID,
+      storageID
+    )
+    if (!res.success) {
+      return {
+        success: false,
+        message: res.message,
+      };
+    }
+    const task = new UploadingTask(res.data!.id, file, res.data!.blocksCount, res.data!.blockSize, onFinished);
+    task.addListener(this.onTaskStatusChanged);
+    this.tasks.push(task);
+    this.onTaskStatusChanged();
+    return  {
+      success: true,
+      message: "ok",
+    }
+  }
+
+  getTasks() {
+    return this.tasks
+  }
+
+  removeTask(task: UploadingTask) {
+    task.cancel();
+    task.removeListener(this.onTaskStatusChanged);
+    this.tasks = this.tasks.filter(t => t !== task);
+  }
+
+  hasTasks() {
+    return this.tasks.length > 0;
   }
 }
 

frontend/src/pages/resource_details_page.tsx

@@ -22,6 +22,8 @@ export default function ResourcePage() {
 
   const [resource, setResource] = useState<ResourceDetails | null>(null)
 
+  const [page, setPage] = useState(0)
+
   const reload = useCallback(async () => {
     if (!isNaN(id)) {
       setResource(null)
@@ -86,8 +88,10 @@ export default function ResourcePage() {
         }
       </p>
       <div className="tabs tabs-box my-4 mx-2 p-4">
-        <label className="tab ">
-          <input type="radio" name="my_tabs" defaultChecked/>
+        <label className="tab">
+          <input type="radio" name="my_tabs" checked={page === 0} onChange={() => {
+            setPage(0)
+          }}/>
           <MdOutlineArticle className="text-xl mr-2"/>
           <span className="text-sm">
           {t("Description")}
@@ -98,7 +102,9 @@ export default function ResourcePage() {
         </div>
 
         <label className="tab">
-          <input type="radio" name="my_tabs"/>
+          <input type="radio" name="my_tabs" checked={page === 1} onChange={() => {
+            setPage(1)
+          }}/>
           <MdOutlineDataset className="text-xl mr-2"/>
           <span className="text-sm">
           {t("Files")}
@@ -109,7 +115,9 @@ export default function ResourcePage() {
         </div>
 
         <label className="tab">
-          <input type="radio" name="my_tabs"/>
+          <input type="radio" name="my_tabs" checked={page === 2} onChange={() => {
+            setPage(2)
+          }}/>
           <MdOutlineComment className="text-xl mr-2"/>
           <span className="text-sm">
           {t("Comments")}
@@ -218,6 +226,7 @@ function CreateFileDialog({resourceId}: { resourceId: number }) {
         reload()
       } else {
         setError(res.message)
+        setSubmitting(false)
       }
     } else {
       if (!file || !storage) {
@@ -225,14 +234,18 @@ function CreateFileDialog({resourceId}: { resourceId: number }) {
         setSubmitting(false)
         return
       }
-      const res = await uploadingManager.addTask(file, resourceId, storage.id, description);
+      const res = await uploadingManager.addTask(file, resourceId, storage.id, description, () => {
+        if (mounted.current) {
+          reload();
+        }
+      });
       if (res.success) {
         const dialog = document.getElementById("upload_dialog") as HTMLDialogElement
         dialog.close()
         showToast({message: t("Successfully create uploading task."), type: "success"})
-        reload()
       } else {
         setError(res.message)
+        setSubmitting(false)
       }
     }
   }