feat(FR-1334): implement drag-and-drop file upload functionality (#4089)

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

This PR adds drag and drop file upload functionality to the file explorer. Users can now drag files directly into the file explorer area to upload them, providing a more intuitive and convenient way to manage files.

Key changes:
- Created a new `DragAndDrop` component that appears when files are dragged over the file explorer
- Extracted file upload logic into a reusable hook `useUploadVFolderFiles` to avoid code duplication
- Added event listeners to detect drag and drop events at the document level
- Added translations for the drag and drop feature in all supported languages
- Simplified the file upload process in the `ActionItems` component by using the new hook

**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-1334]: https://lablup.atlassian.net/browse/FR-1334?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: ironAiken2

packages/backend.ai-ui/src/components/Table/BAITable.tsx

@@ -350,13 +350,17 @@ const BAITable = <RecordType extends object = any>({
             }
           }
         }}
-        pagination={{
-          style: {
-            display: 'none', // Hide default pagination as we're using custom Pagination component below
-          },
-          current: currentPage,
-          pageSize: currentPageSize,
-        }}
+        pagination={
+          tableProps.pagination === false
+            ? false
+            : {
+                style: {
+                  display: 'none', // Hide default pagination as we're using custom Pagination component below
+                },
+                current: currentPage,
+                pageSize: currentPageSize,
+              }
+        }
       />
       {tableProps.pagination !== false && (
         <BAIFlex justify="end" gap={'xs'}>

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

@@ -6,10 +6,11 @@ import {
 } from '../../../helper';
 import BAIFlex from '../../BAIFlex';
 import BAIUnmountAfterClose from '../../BAIUnmountAfterClose';
-import { BAITable } from '../../Table';
+import { BAITable, BAITableProps } from '../../Table';
 import useConnectedBAIClient from '../../provider/BAIClientProvider/hooks/useConnectedBAIClient';
 import { VFolderFile } from '../../provider/BAIClientProvider/types';
 import DeleteSelectedItemsModal from './DeleteSelectedItemsModal';
+import DragAndDrop from './DragAndDrop';
 import ExplorerActionControls from './ExplorerActionControls';
 import FileItemControls from './FileItemControls';
 import { useSearchVFolderFiles } from './hooks';
@@ -53,17 +54,26 @@ export const FolderInfoContext = createContext<{
 export interface BAIFileExplorerProps {
   vfolderNodeFrgmt?: BAIFileExplorerFragment$key | null;
   targetVFolderId: string;
+  fetchKey?: string;
   onUpload: (files: Array<RcFile>, currentPath: string) => void;
+  tableProps?: Partial<BAITableProps<VFolderFile>>;
+  style?: React.CSSProperties;
+  fileDropContainerRef?: React.RefObject<HTMLDivElement | null>;
 }
 
 const BAIFileExplorer: React.FC<BAIFileExplorerProps> = ({
   vfolderNodeFrgmt,
   targetVFolderId,
+  fetchKey,
   onUpload,
+  tableProps,
+  fileDropContainerRef,
+  style,
 }) => {
   const { t } = useTranslation();
   const { token } = theme.useToken();
   const { styles } = useStyles();
+  const [isDragMode, setIsDragMode] = useState(false);
   const [selectedItems, setSelectedItems] = useState<Array<VFolderFile>>([]);
   const [selectedSingleItem, setSelectedSingleItem] =
     useState<VFolderFile | null>(null);
@@ -78,7 +88,7 @@ const BAIFileExplorer: React.FC<BAIFileExplorerProps> = ({
     navigateDown,
     navigateToPath,
     refetch,
-  } = useSearchVFolderFiles(targetVFolderId);
+  } = useSearchVFolderFiles(targetVFolderId, fetchKey);
 
   const [fetchedFilesCache, setFetchedFilesCache] = useState<
     Array<VFolderFile>
@@ -99,6 +109,38 @@ const BAIFileExplorer: React.FC<BAIFileExplorerProps> = ({
     vfolderNodeFrgmt,
   );
 
+  useEffect(() => {
+    const handleDragEnter = (e: DragEvent) => {
+      e.preventDefault();
+      setIsDragMode(true);
+    };
+    const handleDragLeave = (e: DragEvent) => {
+      e.preventDefault();
+      if (!e.relatedTarget || !document.contains(e.relatedTarget as Node)) {
+        setIsDragMode(false);
+      }
+    };
+    const handleDragOver = (e: DragEvent) => {
+      e.preventDefault();
+    };
+    const handleDrop = (e: DragEvent) => {
+      e.preventDefault();
+      setIsDragMode(false);
+    };
+
+    document.addEventListener('dragenter', handleDragEnter);
+    document.addEventListener('dragleave', handleDragLeave);
+    document.addEventListener('dragover', handleDragOver);
+    document.addEventListener('drop', handleDrop);
+
+    return () => {
+      document.removeEventListener('dragenter', handleDragEnter);
+      document.removeEventListener('dragleave', handleDragLeave);
+      document.removeEventListener('dragover', handleDragOver);
+      document.removeEventListener('drop', handleDrop);
+    };
+  }, []);
+
   const breadCrumbItems: Array<ItemType> = useMemo(() => {
     const pathParts = currentPath === '.' ? [] : currentPath.split('/');
 
@@ -244,7 +286,19 @@ const BAIFileExplorer: React.FC<BAIFileExplorerProps> = ({
 
   return (
     <FolderInfoContext.Provider value={{ targetVFolderId, currentPath }}>
-      <BAIFlex direction="column" align="stretch" gap="md">
+      {isDragMode && (
+        <DragAndDrop
+          portalContainer={fileDropContainerRef?.current || undefined}
+          onUpload={(files, currentPath) => onUpload(files, currentPath)}
+        />
+      )}
+      <BAIFlex
+        direction="column"
+        align="stretch"
+        justify="start"
+        gap="md"
+        style={{ height: '100%', ...style }}
+      >
         <BAIFlex align="center" justify="between">
           <Breadcrumb
             items={breadCrumbItems}
@@ -284,7 +338,6 @@ const BAIFileExplorer: React.FC<BAIFileExplorerProps> = ({
 
         <BAITable
           rowKey="name"
-          bordered
           scroll={{ x: 'max-content' }}
           dataSource={fetchedFilesCache}
           columns={tableColumns}
@@ -315,6 +368,7 @@ const BAIFileExplorer: React.FC<BAIFileExplorerProps> = ({
               }
             },
           })}
+          {...tableProps}
         />
       </BAIFlex>
       <BAIUnmountAfterClose>

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

@@ -0,0 +1,56 @@
+import { useUploadVFolderFiles } from './hooks';
+import { InboxOutlined } from '@ant-design/icons';
+import { theme, Typography, Upload } from 'antd';
+import { RcFile } from 'antd/es/upload';
+import { useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
+
+interface DragAndDropProps {
+  onUpload: (files: Array<RcFile>, currentPath: string) => void;
+  /** Optional container element for portal rendering */
+  portalContainer?: HTMLElement | null;
+}
+
+const DragAndDrop: React.FC<DragAndDropProps> = ({
+  onUpload,
+  portalContainer,
+}) => {
+  const { t } = useTranslation();
+  const { token } = theme.useToken();
+  const { uploadFiles } = useUploadVFolderFiles();
+  const lastFileListRef = useRef<Array<RcFile>>([]);
+
+  const overlay = (
+    <Upload.Dragger
+      style={{
+        position: 'absolute',
+        inset: 0,
+        zIndex: token.zIndexPopupBase + 1,
+        backdropFilter: 'blur(4px)',
+        borderWidth: 3,
+      }}
+      multiple
+      directory
+      showUploadList={false}
+      beforeUpload={(_, fileList) => {
+        if (fileList !== lastFileListRef.current) {
+          uploadFiles(fileList, onUpload);
+        }
+        lastFileListRef.current = fileList;
+        return false;
+      }}
+    >
+      <p>
+        <InboxOutlined style={{ fontSize: token.fontSizeHeading1 }} />
+      </p>
+      <Typography.Text style={{ fontSize: token.fontSizeHeading4 }}>
+        {t('comp:FileExplorer.DragAndDropDesc')}
+      </Typography.Text>
+    </Upload.Dragger>
+  );
+
+  return portalContainer ? createPortal(overlay, portalContainer) : overlay;
+};
+
+export default DragAndDrop;

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

@@ -5,16 +5,16 @@ import { VFolderFile } from '../../provider/BAIClientProvider/types';
 import { FolderInfoContext } from './BAIFileExplorer';
 import CreateDirectoryModal from './CreateDirectoryModal';
 import DeleteSelectedItemsModal from './DeleteSelectedItemsModal';
+import { useUploadVFolderFiles } from './hooks';
 import {
   FileAddOutlined,
   FolderAddOutlined,
   UploadOutlined,
 } from '@ant-design/icons';
 import { useQuery } from '@tanstack/react-query';
 import { useToggle } from 'ahooks';
-import { App, Button, Dropdown, Grid, theme, Tooltip, Upload } from 'antd';
+import { Button, Dropdown, Grid, theme, Tooltip, Upload } from 'antd';
 import { RcFile } from 'antd/es/upload';
-import _ from 'lodash';
 import { use, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -36,8 +36,8 @@ const ExplorerActionControls: React.FC<ExplorerActionControlsProps> = ({
   const { t } = useTranslation();
   const { lg } = Grid.useBreakpoint();
   const { token } = theme.useToken();
-  const { modal } = App.useApp();
-  const { targetVFolderId, currentPath } = use(FolderInfoContext);
+  const { targetVFolderId } = use(FolderInfoContext);
+  const { uploadFiles } = useUploadVFolderFiles();
   const [openCreateModal, { toggle: toggleCreateModal }] = useToggle(false);
   const [openDeleteModal, { toggle: toggleDeleteModal }] = useToggle(false);
   const lastFileListRef = useRef<Array<RcFile>>([]);
@@ -51,34 +51,6 @@ const ExplorerActionControls: React.FC<ExplorerActionControlsProps> = ({
     gcTime: 0,
   });
 
-  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),
-        );
-      });
-
-    if (duplicateCheckResult) {
-      modal.confirm({
-        title: t('comp:FileExplorer.DuplicatedFiles'),
-        content: t('comp:FileExplorer.DuplicatedFilesDesc'),
-        onOk: () => {
-          onUpload(fileList, path);
-        },
-      });
-    } else {
-      onUpload(fileList, path);
-    }
-  };
-
   return (
     <BAIFlex gap="xs">
       <BAIFlex gap={'sm'}>
@@ -116,7 +88,7 @@ const ExplorerActionControls: React.FC<ExplorerActionControlsProps> = ({
                 label: (
                   <Upload
                     beforeUpload={(_, fileList) => {
-                      handleUpload(fileList, currentPath);
+                      uploadFiles(fileList, onUpload);
                       return false; // Prevent default upload behavior
                     }}
                     showUploadList={false}
@@ -133,7 +105,7 @@ const ExplorerActionControls: React.FC<ExplorerActionControlsProps> = ({
                     directory
                     beforeUpload={(_, fileList) => {
                       if (fileList !== lastFileListRef.current) {
-                        handleUpload(fileList, currentPath);
+                        uploadFiles(fileList, onUpload);
                       }
                       lastFileListRef.current = fileList;
                       return false;

packages/backend.ai-ui/src/components/baiClient/FileExplorer/hooks.ts

@@ -1,10 +1,15 @@
 import useConnectedBAIClient from '../../provider/BAIClientProvider/hooks/useConnectedBAIClient';
 import { VFolderFile } from '../../provider/BAIClientProvider/types';
+import { FolderInfoContext } from './BAIFileExplorer';
 import { useQuery } from '@tanstack/react-query';
-import { useState } from 'react';
+import { App } from 'antd';
+import { RcFile } from 'antd/es/upload';
+import _ from 'lodash';
+import { use, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { StringParam, useQueryParam, withDefault } from 'use-query-params';
 
-export const useSearchVFolderFiles = (vfolder: string) => {
+export const useSearchVFolderFiles = (vfolder: string, fetchKey?: string) => {
   const baiClient = useConnectedBAIClient();
   const [currentPath, setCurrentPath] = useState<string>('.');
   const [, setCurrentPathParam] = useQueryParam(
@@ -46,7 +51,7 @@ export const useSearchVFolderFiles = (vfolder: string) => {
     refetch,
     isFetching,
   } = useQuery({
-    queryKey: ['searchVFolderFiles', vfolder, currentPath],
+    queryKey: ['searchVFolderFiles', vfolder, currentPath, fetchKey],
     queryFn: () =>
       baiClient.vfolder.list_files(currentPath, vfolder).then((res) => {
         setDirectoryTree((prev) => ({
@@ -72,3 +77,50 @@ export const useSearchVFolderFiles = (vfolder: string) => {
     isFetching,
   };
 };
+
+export const useUploadVFolderFiles = () => {
+  const { t } = useTranslation();
+  const { modal } = App.useApp();
+  const { targetVFolderId, currentPath } = use(FolderInfoContext);
+  const baiClient = useConnectedBAIClient();
+
+  const uploadFiles = async (
+    fileList: Array<RcFile>,
+    onUpload: (files: Array<RcFile>, currentPath: string) => void,
+    afterUpload?: () => void,
+  ) => {
+    // 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 uploadFolderName = fileList[0].webkitRelativePath.split('/')[0];
+
+    const duplicateCheckResult = await baiClient.vfolder
+      .list_files(currentPath, targetVFolderId)
+      .then((files) => {
+        if (uploadFolderName) {
+          return _.some(files.items, (f) => f.name === uploadFolderName);
+        } else {
+          return _.some(files.items, (f) => f.name === fileList[0].name);
+        }
+      })
+      .catch(() => undefined);
+
+    if (duplicateCheckResult) {
+      modal.confirm({
+        title: t('comp:FileExplorer.DuplicatedFiles'),
+        content: t('comp:FileExplorer.DuplicatedFilesDesc'),
+        onOk: () => {
+          onUpload(fileList, currentPath);
+          afterUpload?.();
+        },
+      });
+    } else {
+      onUpload(fileList, currentPath);
+      afterUpload?.();
+    }
+  };
+
+  return {
+    uploadFiles,
+  };
+};

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

@@ -6,11 +6,6 @@
   "comp:PaginationInfoText": {
     "Total": "{{start}} - {{end}} von {{total}} Elementen"
   },
-  "comp:BAITable": {
-    "SettingTable": "Tabelleneinstellungen",
-    "SelectColumnToDisplay": "Wählen Sie Spalten aus, um angezeigt zu werden",
-    "SearchTableColumn": "Suchtabellenspalten"
-  },
   "error": {
     "UnknownError": "Ein unbekannter Fehler ist aufgetreten. \nBitte versuchen Sie es erneut."
   },
@@ -44,7 +39,13 @@
       "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"
+    "DuplicatedFiles": "Überschreibung der Bestätigung",
+    "DragAndDropDesc": "Ziehen Sie Dateien in diesen Bereich zum Hochladen."
+  },
+  "comp:BAITable": {
+    "SettingTable": "Tabelleneinstellungen",
+    "SelectColumnToDisplay": "Wählen Sie Spalten aus, um angezeigt zu werden",
+    "SearchTableColumn": "Suchtabellenspalten"
   },
   "comp:BAIPropertyFilter": {
     "PlaceHolder": "Suche",