feat(FR-1316): implement file upload manager with TUS protocol and cancellation support (#4050)

resolves #4046 ([FR-1316](https://lablup.atlassian.net/browse/FR-1316))

This PR implements a new file upload system with the following improvements:

1. Created a dedicated `FileUploadManager` component that handles file uploads centrally
2. Added a confirmation dialog when uploading files that would overwrite existing ones
3. Implemented a more robust upload process with progress tracking in notifications
4. Added ability to cancel ongoing uploads
5. Optimized chunk sizes based on file size for better performance
6. Added comprehensive upload status notifications (pending, success, failure)
7. Added internationalization support for all new upload-related messages

The implementation moves the upload logic from the UI components to a centralized manager that handles all upload requests, making the code more maintainable and providing a consistent user experience.

**Checklist:**

- [x] Documentation
- [ ] Minium required manager version
- [ ] Specific setting for review (eg., KB link, endpoint or how to setup)
- [ ] Minimum requirements to check during review
- [ ] Test case(s) to demonstrate the difference of before/after

[FR-1316]: https://lablup.atlassian.net/browse/FR-1316?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: ironAiken2

packages/backend.ai-ui/src/components/baiClient/FileExplorer/BAIFileExplorer.tsx

@@ -23,6 +23,7 @@ import {
 } from 'antd';
 import { createStyles } from 'antd-style';
 import { ItemType } from 'antd/es/breadcrumb/Breadcrumb';
+import { RcFile } from 'antd/es/upload';
 import dayjs from 'dayjs';
 import _ from 'lodash';
 import { createContext, Suspense, useEffect, useMemo, useState } from 'react';
@@ -52,11 +53,13 @@ export const FolderInfoContext = createContext<{
 export interface BAIFileExplorerProps {
   vfolderNodeFrgmt?: BAIFileExplorerFragment$key | null;
   targetVFolderId: string;
+  onUpload: (files: Array<RcFile>, currentPath: string) => void;
 }
 
 const BAIFileExplorer: React.FC<BAIFileExplorerProps> = ({
   vfolderNodeFrgmt,
   targetVFolderId,
+  onUpload,
 }) => {
   const { t } = useTranslation();
   const { token } = theme.useToken();
@@ -248,6 +251,7 @@ const BAIFileExplorer: React.FC<BAIFileExplorerProps> = ({
           <Breadcrumb items={breadCrumbItems} />
           <ExplorerActionControls
             selectedFiles={selectedItems}
+            onUpload={(files, currentPath) => onUpload(files, currentPath)}
             onRequestClose={(
               success: boolean,
               modifiedItems?: Array<VFolderFile>,

packages/backend.ai-ui/src/components/baiClient/FileExplorer/ExplorerActionControls.tsx

@@ -15,30 +15,32 @@ import { useToggle } from 'ahooks';
 import { App, Button, Dropdown, Grid, theme, Tooltip, Upload } from 'antd';
 import { RcFile } from 'antd/es/upload';
 import _ from 'lodash';
-import { use } from 'react';
+import { use, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import * as tus from 'tus-js-client';
 
 interface ExplorerActionControlsProps {
   selectedFiles: Array<VFolderFile>;
   onRequestClose: (
     success: boolean,
     modifiedItems?: Array<VFolderFile>,
   ) => void;
+  onUpload: (files: Array<RcFile>, currentPath: string) => void;
 }
 
 const ExplorerActionControls: React.FC<ExplorerActionControlsProps> = ({
   selectedFiles,
   onRequestClose,
+  onUpload,
 }) => {
   const baiClient = useConnectedBAIClient();
   const { t } = useTranslation();
   const { lg } = Grid.useBreakpoint();
   const { token } = theme.useToken();
-  const { message } = App.useApp();
+  const { modal } = App.useApp();
   const { targetVFolderId, currentPath } = use(FolderInfoContext);
   const [openCreateModal, { toggle: toggleCreateModal }] = useToggle(false);
   const [openDeleteModal, { toggle: toggleDeleteModal }] = useToggle(false);
+  const lastFileListRef = useRef<Array<RcFile>>([]);
 
   const { data: vfolderInfo, isFetching } = useQuery({
     queryKey: ['vfolderInfo', targetVFolderId],
@@ -49,64 +51,32 @@ const ExplorerActionControls: React.FC<ExplorerActionControlsProps> = ({
     gcTime: 0,
   });
 
-  const handleUpload = (fileList: Array<RcFile>) => {
-    const maxUploadSize = baiClient?._config?.maxFileUploadSize;
-    if (
-      maxUploadSize > 0 &&
-      _.some(fileList, (file) => file.size > maxUploadSize)
-    ) {
-      message.error(t('comp:FileExplorer.error.FileUploadSizeLimit'));
-      return;
-    }
-
-    // TODO: show confirmation modal before upload already existing files
-    // TODO: show progress during upload via using bai-notification
-    const uploadFiles: Array<Promise<tus.Upload>> = _.map(
-      fileList,
-      async (file) => {
-        const fullPath = _.join(
-          [currentPath, file.webkitRelativePath || file.name],
-          '/',
+  const handleUpload = async (fileList: RcFile[], path: string) => {
+    // Currently, backend.ai only supports finding existing files by using list_files API.
+    // This API throw an error if the file does not exist in the target vfolder.
+    // So, we need to catch the error and return undefined.
+    const duplicateCheckResult = await baiClient.vfolder
+      .list_files(currentPath, targetVFolderId)
+      .then((files) => {
+        return _.some(
+          files.items,
+          (existFiles) =>
+            existFiles.name ===
+            (fileList[0].webkitRelativePath.split('/')[0] || fileList[0].name),
         );
+      });
 
-        try {
-          const url = await baiClient?.vfolder?.create_upload_session(
-            fullPath,
-            file,
-            targetVFolderId,
-          );
-          const upload = new tus.Upload(file, {
-            endpoint: url,
-            uploadUrl: url,
-            retryDelays: [0, 3000, 5000, 10000, 20000],
-            chunkSize: 15 * 1024 * 1024, // 15MB
-            metadata: {
-              filename: fullPath,
-              filetype: file.type,
-            },
-            // TODO: use baiNotification after notification migration to backend.ai-ui
-            onError: (err) => {},
-            onProgress: (bytesUploaded, bytesTotal) => {},
-            onSuccess: () => {
-              onRequestClose(true);
-            },
-          });
-          return upload;
-        } catch (err: any) {
-          if (err && err.message) {
-            message.error(err.message);
-          } else if (err && err.title) {
-            message.error(err.title);
-          }
-          return Promise.reject(err);
-        }
-      },
-    );
-    Promise.all(uploadFiles).then((uploads) => {
-      uploads.forEach((upload) => {
-        upload.start();
+    if (duplicateCheckResult) {
+      modal.confirm({
+        title: t('comp:FileExplorer.DuplicatedFiles'),
+        content: t('comp:FileExplorer.DuplicatedFilesDesc'),
+        onOk: () => {
+          onUpload(fileList, path);
+        },
       });
-    });
+    } else {
+      onUpload(fileList, path);
+    }
   };
 
   return (
@@ -146,7 +116,7 @@ const ExplorerActionControls: React.FC<ExplorerActionControlsProps> = ({
                 label: (
                   <Upload
                     beforeUpload={(_, fileList) => {
-                      handleUpload(fileList);
+                      handleUpload(fileList, currentPath);
                       return false; // Prevent default upload behavior
                     }}
                     showUploadList={false}
@@ -162,7 +132,10 @@ const ExplorerActionControls: React.FC<ExplorerActionControlsProps> = ({
                   <Upload
                     directory
                     beforeUpload={(_, fileList) => {
-                      handleUpload(fileList);
+                      if (fileList !== lastFileListRef.current) {
+                        handleUpload(fileList, currentPath);
+                      }
+                      lastFileListRef.current = fileList;
                       return false;
                     }}
                     showUploadList={false}
@@ -176,7 +149,7 @@ const ExplorerActionControls: React.FC<ExplorerActionControlsProps> = ({
           }}
         >
           <Tooltip title={!lg && t('general.button.Upload')}>
-            <Button icon={<UploadOutlined />} onClick={() => {}}>
+            <Button icon={<UploadOutlined />}>
               {lg && t('general.button.Upload')}
             </Button>
           </Tooltip>

packages/backend.ai-ui/src/components/provider/BAIClientProvider/index.ts

@@ -1,6 +1,6 @@
-export { default as useConnectedBAIClient } from './hooks/useConnectedBAIClient';
-
 export { default as BAIClientProvider } from './BAIClientProvider';
 export type { BAIClientProviderProps } from './BAIClientProvider';
 export { BAIClientContext, BAIAnonymousClientContext } from './context';
 export type { BAIClient } from './types';
+export { default as useConnectedBAIClient } from './hooks/useConnectedBAIClient';
+export { default as useAnonymousBAIClient } from './hooks/useAnonymousBAIClient';

packages/backend.ai-ui/src/locale/de.json

@@ -1,60 +1,62 @@
 {
   "$schema": "../../i18n.schema.json",
-  "comp:BAIPropertyFilter": {
-    "PlaceHolder": "Suche",
-    "ResetFilter": "Filter zurücksetzen"
-  },
-  "comp:BAISessionAgentIds": {
-    "Agent": "Agent"
+  "comp:BAITestButton": {
+    "Test": "test"
   },
-  "comp:BAIStatistic": {
-    "Unlimited": "Unbegrenzt"
+  "comp:PaginationInfoText": {
+    "Total": "{{start}} - {{end}} von {{total}} Elementen"
   },
   "comp:BAITable": {
-    "SearchTableColumn": "Suchtabellenspalten",
+    "SettingTable": "Tabelleneinstellungen",
     "SelectColumnToDisplay": "Wählen Sie Spalten aus, um angezeigt zu werden",
-    "SettingTable": "Tabelleneinstellungen"
+    "SearchTableColumn": "Suchtabellenspalten"
   },
-  "comp:BAITestButton": {
-    "Test": "test"
+  "error": {
+    "UnknownError": "Ein unbekannter Fehler ist aufgetreten. \nBitte versuchen Sie es erneut."
+  },
+  "general": {
+    "NSelected": "{{count}} ausgewählt",
+    "button": {
+      "Delete": "Löschen",
+      "Create": "Erstellen",
+      "Upload": "Hochladen",
+      "CopyAll": "Alle kopieren"
+    }
   },
   "comp:FileExplorer": {
-    "Controls": "Kontrollen",
-    "CreateANewFolder": "Erstellen Sie einen neuen Ordner",
-    "CreatedAt": "Erstellt at",
-    "DeleteSelectedItemDesc": "Löschte Dateien und Ordner können nicht wiederhergestellt werden. \nMöchten Sie fortfahren?",
+    "SelectedItemsDeletedSuccessfully": "Ausgewählte Dateien und Ordner wurden erfolgreich gelöscht.",
     "DeleteSelectedItemsDialog": "Bestätigung löschen",
-    "DownloadStarted": "Die Datei \"{{fileName}}\" wurde gestartet.",
+    "DeleteSelectedItemDesc": "Löschte Dateien und Ordner können nicht wiederhergestellt werden. \nMöchten Sie fortfahren?",
     "FolderCreatedSuccessfully": "Ordner erfolgreich erstellt.",
+    "CreateANewFolder": "Erstellen Sie einen neuen Ordner",
     "FolderName": "Ordner Name",
+    "PleaseEnterAFolderName": "Bitte geben Sie den Ordneramen ein.",
     "MaxFolderNameLength": "Der Ordnername muss 255 Zeichen oder weniger betragen.",
-    "ModifiedAt": "Modifiziert bei",
     "Name": "Name",
-    "PleaseEnterAFolderName": "Bitte geben Sie den Ordneramen ein.",
-    "SelectedItemsDeletedSuccessfully": "Ausgewählte Dateien und Ordner wurden erfolgreich gelöscht.",
     "Size": "Größe",
+    "CreatedAt": "Erstellt at",
+    "ModifiedAt": "Modifiziert bei",
+    "Controls": "Kontrollen",
     "UploadFiles": "Dateien hochladen",
     "UploadFolder": "Ordner hochladen",
+    "DownloadStarted": "Die Datei \"{{fileName}}\" wurde gestartet.",
     "error": {
       "FileUploadSizeLimit": "Die Dateigröße überschreitet die Hochladungsgrenze."
-    }
+    },
+    "DuplicatedFilesDesc": "Die Datei oder der Ordner mit demselben Namen existieren bereits. \nMöchten Sie überschreiben?",
+    "DuplicatedFiles": "Überschreibung der Bestätigung"
   },
-  "comp:PaginationInfoText": {
-    "Total": "{{start}} - {{end}} von {{total}} Elementen"
+  "comp:BAIPropertyFilter": {
+    "PlaceHolder": "Suche",
+    "ResetFilter": "Filter zurücksetzen"
   },
-  "comp:ResourceStatistics": {
-    "NoResourcesData": "Keine Ressourcendaten verfügbar"
+  "comp:BAISessionAgentIds": {
+    "Agent": "Agent"
   },
-  "error": {
-    "UnknownError": "Ein unbekannter Fehler ist aufgetreten. \nBitte versuchen Sie es erneut."
+  "comp:BAIStatistic": {
+    "Unlimited": "Unbegrenzt"
   },
-  "general": {
-    "NSelected": "{{count}} ausgewählt",
-    "button": {
-      "CopyAll": "Alle kopieren",
-      "Create": "Erstellen",
-      "Delete": "Löschen",
-      "Upload": "Hochladen"
-    }
+  "comp:ResourceStatistics": {
+    "NoResourcesData": "Keine Ressourcendaten verfügbar"
   }
 }

packages/backend.ai-ui/src/locale/el.json

@@ -1,60 +1,62 @@
 {
   "$schema": "../../i18n.schema.json",
-  "comp:BAIPropertyFilter": {
-    "PlaceHolder": "Αναζήτηση",
-    "ResetFilter": "Επαναφορά φίλτρων"
-  },
-  "comp:BAISessionAgentIds": {
-    "Agent": "Μέσο"
+  "comp:BAITestButton": {
+    "Test": "δοκιμή"
   },
-  "comp:BAIStatistic": {
-    "Unlimited": "Απεριόριστος"
+  "comp:PaginationInfoText": {
+    "Total": "{{start}} - {{end}} των στοιχείων {{total}}"
   },
   "comp:BAITable": {
-    "SearchTableColumn": "Στήλες πίνακα αναζήτησης",
     "SelectColumnToDisplay": "Επιλέξτε στήλες για εμφάνιση",
+    "SearchTableColumn": "Στήλες πίνακα αναζήτησης",
     "SettingTable": "Ρυθμίσεις πίνακα"
   },
-  "comp:BAITestButton": {
-    "Test": "δοκιμή"
+  "error": {
+    "UnknownError": "Παρουσιάστηκε ένα άγνωστο σφάλμα. \nΔοκιμάστε ξανά."
+  },
+  "general": {
+    "NSelected": "{{count}} Επιλεγμένη",
+    "button": {
+      "Delete": "Διαγράφω",
+      "Create": "Δημιουργώ",
+      "Upload": "Μεταφορτώσω",
+      "CopyAll": "Αντιγράψτε όλα"
+    }
   },
   "comp:FileExplorer": {
-    "Controls": "Χειριστήρια",
-    "CreateANewFolder": "Δημιουργήστε ένα νέο φάκελο",
-    "CreatedAt": "Δημιουργήθηκε στο",
-    "DeleteSelectedItemDesc": "Τα διαγραμμένα αρχεία και οι φάκελοι δεν μπορούν να αποκατασταθούν. \nΘέλετε να προχωρήσετε;",
+    "SelectedItemsDeletedSuccessfully": "Επιλεγμένα αρχεία και φακέλους έχουν διαγραφεί με επιτυχία.",
     "DeleteSelectedItemsDialog": "Διαγραφή επιβεβαίωσης",
-    "DownloadStarted": "Αρχείο \"{{fileName}}\" Η λήψη έχει ξεκινήσει.",
+    "DeleteSelectedItemDesc": "Τα διαγραμμένα αρχεία και οι φάκελοι δεν μπορούν να αποκατασταθούν. \nΘέλετε να προχωρήσετε;",
     "FolderCreatedSuccessfully": "Ο φάκελος δημιούργησε με επιτυχία.",
+    "CreateANewFolder": "Δημιουργήστε ένα νέο φάκελο",
     "FolderName": "Όνομα φακέλου",
+    "PleaseEnterAFolderName": "Εισαγάγετε το όνομα του φακέλου.",
     "MaxFolderNameLength": "Το όνομα του φακέλου πρέπει να είναι 255 χαρακτήρες ή λιγότερο.",
-    "ModifiedAt": "Τροποποιημένος",
     "Name": "Ονομα",
-    "PleaseEnterAFolderName": "Εισαγάγετε το όνομα του φακέλου.",
-    "SelectedItemsDeletedSuccessfully": "Επιλεγμένα αρχεία και φακέλους έχουν διαγραφεί με επιτυχία.",
     "Size": "Μέγεθος",
+    "CreatedAt": "Δημιουργήθηκε στο",
+    "ModifiedAt": "Τροποποιημένος",
+    "Controls": "Χειριστήρια",
     "UploadFiles": "Μεταφόρτωση αρχείων",
     "UploadFolder": "Μεταφορτωμένος φάκελος",
+    "DownloadStarted": "Αρχείο \"{{fileName}}\" Η λήψη έχει ξεκινήσει.",
     "error": {
       "FileUploadSizeLimit": "Το μέγεθος του αρχείου υπερβαίνει το όριο μεγέθους μεταφόρτωσης."
-    }
+    },
+    "DuplicatedFilesDesc": "Το αρχείο ή ο φάκελος με το ίδιο όνομα υπάρχει ήδη. \nΘέλετε να αντικαταστήσετε;",
+    "DuplicatedFiles": "Αντιπροσώπηση επιβεβαίωσης"
   },
-  "comp:PaginationInfoText": {
-    "Total": "{{start}} - {{end}} των στοιχείων {{total}}"
+  "comp:BAIPropertyFilter": {
+    "PlaceHolder": "Αναζήτηση",
+    "ResetFilter": "Επαναφορά φίλτρων"
   },
-  "comp:ResourceStatistics": {
-    "NoResourcesData": "Δεν υπάρχουν διαθέσιμα δεδομένα πόρων"
+  "comp:BAISessionAgentIds": {
+    "Agent": "Μέσο"
   },
-  "error": {
-    "UnknownError": "Παρουσιάστηκε ένα άγνωστο σφάλμα. \nΔοκιμάστε ξανά."
+  "comp:BAIStatistic": {
+    "Unlimited": "Απεριόριστος"
   },
-  "general": {
-    "NSelected": "{{count}} Επιλεγμένη",
-    "button": {
-      "CopyAll": "Αντιγράψτε όλα",
-      "Create": "Δημιουργώ",
-      "Delete": "Διαγράφω",
-      "Upload": "Μεταφορτώσω"
-    }
+  "comp:ResourceStatistics": {
+    "NoResourcesData": "Δεν υπάρχουν διαθέσιμα δεδομένα πόρων"
   }
 }