Implement s3 storage.

Use uuid as file id.

frontend/src/network/models.ts

@@ -74,7 +74,7 @@ export interface Storage {
 }
 
 export interface RFile {
-  id: number;
+  id: string;
   filename: string;
   description: string;
 }

frontend/src/network/network.ts

@@ -488,7 +488,7 @@ class Network {
     }
   }
 
-  async getFile(fileId: number): Promise<Response<RFile>> {
+  async getFile(fileId: string): Promise<Response<RFile>> {
     try {
       const response = await axios.get(`${this.apiBaseUrl}/files/${fileId}`);
       return response.data;
@@ -501,7 +501,7 @@ class Network {
     }
   }
 
-  async updateFile(fileId: number, filename: string, description: string): Promise<Response<RFile>> {
+  async updateFile(fileId: string, filename: string, description: string): Promise<Response<RFile>> {
     try {
       const response = await axios.put(`${this.apiBaseUrl}/files/${fileId}`, {
         filename,
@@ -530,7 +530,7 @@ class Network {
     }
   }
 
-  getFileDownloadLink(fileId: number): string {
+  getFileDownloadLink(fileId: string): string {
     return `${this.apiBaseUrl}/files/download/${fileId}`;
   }
 }

frontend/src/network/uploading.ts

@@ -57,7 +57,7 @@ export class UploadingTask extends Listenable {
     this.onFinished = onFinished;
   }
 
-  async upload(id: number) {
+  async upload() {
     let index = 0;
     while (index < this.blocks.length) {
       if (this.blocks[index] || this.uploadingBlocks.includes(index)) {
@@ -67,7 +67,6 @@ export class UploadingTask extends Listenable {
       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);
@@ -88,7 +87,6 @@ export class UploadingTask extends Listenable {
           break;
         }
       }
-      console.log(`${id}: uploaded block ${index}`);
       this.blocks[index] = true;
       this.finishedBlocksCount++;
       this.uploadingBlocks = this.uploadingBlocks.filter(i => i !== index);
@@ -101,10 +99,10 @@ export class UploadingTask extends Listenable {
     this.status = UploadingStatus.UPLOADING;
     this.notifyListeners();
     await Promise.all([
-      this.upload(0),
-      this.upload(1),
-      this.upload(2),
-      this.upload(3),
+      this.upload(),
+      this.upload(),
+      this.upload(),
+      this.upload(),
     ])
     if (this.status !== UploadingStatus.UPLOADING) {
       return;

frontend/src/pages/manage_user_page.tsx

@@ -71,7 +71,7 @@ function UserTable({ page, searchKeyword, totalPagesCallback }: { page: number,
 
   useEffect(() => {
     fetchUsers();
-  }, [page, searchKeyword]);
+  }, [fetchUsers]);
 
   const handleChanged = useCallback(async () => {
     setUsers(null);