index.tsx

Overview

The index.tsx file defines a React component module centered around a file upload modal dialog, primarily designed for uploading files and directories locally with optional parsing on creation. It utilizes Ant Design components for UI elements and custom hooks for internationalization. The core functionality allows users to drag-and-drop or select files/directories to upload, track upload progress visually, and manage upload state within a modal interface.

This file exports a single default component FileUploadModal, which encapsulates the entire modal dialog functionality. Within it, a reusable FileUpload subcomponent handles the drag-and-drop upload UI and file list management for either single files or directories.

Components and Functions

1. FileUpload Component

A functional component that provides a drag-and-drop file uploader interface using Ant Design's Upload.Dragger. It supports both single file and directory uploads.

Props

Behavior

• Uses Upload.Dragger with customized props:

  • Supports multiple file selection.

  • Prevents automatic upload by returning false in beforeUpload.

  • Allows removing files from the list.

  • Supports directory upload if directory prop is true.

• Displays a progress bar reflecting the uploadProgress.

• Shows localized text for upload title and description via the useTranslate hook scoped to 'fileManager'.

• Has a hidden conditional element for upload limits (currently disabled).

Usage Example

<FileUpload
  directory={false}
  fileList={fileList}
  setFileList={setFileList}
  uploadProgress={uploadProgress}
/>

2. FileUploadModal Component (Default Export)

A modal dialog component wrapping the upload UI, managing modal visibility, upload states, and file selection between files and directories. It supports toggling between local and (future) S3 uploads.

Props (IFileUploadModalProps)

Extends a generic modal props interface IModalProps with additional fields:

Internal State

• value: 'local' | 's3' — Controls whether local or S3 upload is selected.

• parseOnCreation: boolean — Whether to parse files immediately upon upload.

• currentFileList: UploadFile[] — Manages the list of files for local uploads if not controlled externally.

• directoryFileList: UploadFile[] — Manages the list of directory uploads.

Key Methods

• clearFileList(): Clears all file lists and resets upload progress.

• onOk(): Called on modal confirmation:

  • If upload progress is 100%, simply closes the modal.

  • Otherwise, triggers the onFileUploadOk callback passing the selected files and parsing option.

• afterClose(): Called after modal closes to clear files.

UI Structure

• A segmented control toggles between 'local' and 's3' upload options.

• For 'local':

  • Checkbox to enable/disable parsing on creation.

  • Tabs to switch between uploading files or directories, each rendering a FileUpload component.

• For 's3':

  • Displays a "coming soon" message (no implementation yet).

• Uses Ant Design's Modal for the dialog frame.

• Uses a custom Flex component for layout spacing.

Usage Example

<FileUploadModal
  visible={isModalVisible}
  hideModal={() => setModalVisible(false)}
  loading={isUploading}
  onOk={handleUpload}
  uploadFileList={uploadFileList}
  setUploadFileList={setUploadFileList}
  uploadProgress={uploadProgress}
  setUploadProgress={setUploadProgress}
/>

Important Implementation Details

• File List Management: The component supports both controlled and uncontrolled file lists:

  • If uploadFileList and setUploadFileList props are provided, the file list state is controlled externally.

  • Otherwise, internal state variables currentFileList and directoryFileList are used.

• Upload Control: Actual file uploads are not triggered automatically; instead, files are collected and passed to a user-provided callback (onFileUploadOk) for processing.

• Progress Tracking: A progress bar reflects upload progress via the uploadProgress prop, which is expected to be managed externally.

• Internationalization: Uses a custom useTranslate hook scoped to 'fileManager' to provide localized UI strings.

• UI Framework: Based on Ant Design components (Modal, Tabs, Upload, Checkbox, Progress, Segmented).

• Directory Upload Support: The FileUpload component conditionally enables directory upload via the directory prop, leveraging Ant Design's Upload component.

Interaction with Other Parts of the System

• Hooks: Imports and uses a custom useTranslate hook from @/hooks/common-hooks to handle localization.

• Interfaces: Uses the IModalProps interface from @/interfaces/common to type modal-related props.

• Styling: Imports styles from a local stylesheet module index.less for component-specific styling.

• Icons: Uses Ant Design's InboxOutlined icon as part of the upload drag area.

• Parent Components: Expected to be used by a parent component that manages modal visibility, upload progress, and file upload handling logic.

• External Upload Handling: The actual upload logic is expected to be implemented externally and triggered via the onOk callback prop.

Mermaid Diagram: Component Structure and Interactions

componentDiagram
    direction TB
    FileUploadModal --> FileUpload : uses twice for 'file' and 'directory'
    FileUploadModal o-- Modal : renders modal dialog
    FileUpload o-- Upload.Dragger : uses AntD Dragger for upload UI
    FileUpload o-- Progress : shows upload progress
    FileUploadModal o-- Segmented : for local/S3 toggle
    FileUploadModal o-- Checkbox : for parseOnCreation option
    FileUploadModal o-- Tabs : to switch between file/directory uploads
    FileUploadModal --> useTranslate : localization hook
    FileUpload --> useTranslate : localization hook

Summary

The index.tsx file provides a modular, localized, and extensible file upload modal component primarily for local file and directory uploads. It cleanly separates UI concerns between the modal container (FileUploadModal) and the drag-and-drop upload area (FileUpload). It supports controlled and uncontrolled file lists, upload progress feedback, and toggling between local and planned S3 uploads. This component is designed to integrate seamlessly with external upload handling logic and overall application state management.