index.tsx

Overview

This file implements a React component for uploading JSON files through a modal dialog, intended for use in a file management context. It leverages the Ant Design UI library's Upload and Modal components, combined with custom hooks and constants, to provide a localized, user-friendly interface for single-file JSON uploads.

There are two main components:

• FileUpload: A drag-and-drop file uploader supporting JSON files, with optional directory upload.

• JsonUploadModal: A modal dialog that encapsulates the FileUpload component and manages the upload lifecycle, including file selection, confirmation, and cleanup.

The file is structured to handle file state management, UI localization, and integration with parent components through callbacks.

Components and Functions

FileUpload

Description

FileUpload is a controlled React functional component rendering a drag-and-drop uploader (Dragger) from Ant Design. It allows users to select or drag JSON files for upload. It supports uploading directories if the directory prop is set to true.

Props

Behavior

• Accepts only JSON files (FileMimeType.Json).

• Allows only one file at a time (multiple: false).

• On file removal, removes the selected file from the list.

• beforeUpload hook prevents automatic upload, instead updates the file list state with the selected file.

• Supports uploading directories if enabled.

• Displays drag-and-drop UI with localized text and an icon.

Return Value

Returns JSX elements representing the drag-and-drop uploader UI.

Usage Example

const [fileList, setFileList] = useState<UploadFile[]>([]);

// Render the uploader without directory support
<FileUpload directory={false} fileList={fileList} setFileList={setFileList} />

JsonUploadModal

Description

JsonUploadModal is the main exported component that renders an Ant Design modal dialog containing the FileUpload component. It manages the state of selected files, handles confirmation (upload) actions, and resets state upon modal closure.

Props

Extends from IModalProps<UploadFile[]> interface:

Internal State

Methods

• clearFileList: Resets both fileList and directoryFileList to empty arrays.

• onOk: Invokes the onOk callback with all selected files concatenated from both lists.

• afterClose: Clears file lists after modal is closed.

Return Value

Returns JSX elements representing the modal UI containing the FileUpload component.

Usage Example

const [modalVisible, setModalVisible] = useState(false);

const handleUploadOk = async (files: UploadFile[]) => {
  // Process uploaded files here
  console.log(files);
  setModalVisible(false);
};

<JsonUploadModal
  visible={modalVisible}
  hideModal={() => setModalVisible(false)}
  loading={false}
  onOk={handleUploadOk}
/>

Important Implementation Details

• File Type Restriction: The uploader only accepts files with MIME type defined by FileMimeType.Json (presumably "application/json" or similar). This ensures only JSON files are selectable.

• Controlled File List: The file list is managed externally via React state passed down as props. The component prevents automatic upload by returning false in beforeUpload, enabling manual control of the upload process.

• Localization: Text shown in the UI (titles, descriptions, hints) is localized via the useTranslate hook scoped to the fileManager namespace. This allows easy internationalization.

• Directory Upload Support: Though the FileUpload component supports directory uploads via the directory prop, the modal currently only uses it with directory={false} and does not expose directory upload UI.

• Unused UI Elements: There is commented-out code ({false && <p>...) to show an upload limit message, indicating potential future functionality.

• State Management: The modal maintains separate states for single-file and directory uploads but currently only renders the single-file uploader.

Interaction with Other Parts of the System

• Hooks: Uses useTranslate from @/hooks/common-hooks to support multilingual UI.

• Constants: Uses FileMimeType from @/constants/common to enforce file type restrictions.

• Interfaces: Accepts IModalProps from @/interfaces/common dictating modal props shape.

• Styling: Imports styles from a CSS module index.less scoped to the uploader component.

• UI Library: Relies heavily on Ant Design components (Modal, Upload, icons).

• Parent Components: The JsonUploadModal component is designed to be controlled by a parent component controlling visible, loading, and onOk props, allowing integration into broader workflows such as file management or import operations.

Visual Diagram

componentDiagram
    JsonUploadModal --> Modal
    JsonUploadModal --> FileUpload
    FileUpload --> Dragger
    FileUpload --> UploadProps
    FileUpload --> InboxOutlined
    JsonUploadModal --uses--> useTranslate
    FileUpload --uses--> useTranslate
    JsonUploadModal --manages--> fileList
    JsonUploadModal --manages--> directoryFileList

Summary

This file defines a reusable JSON file uploader modal component that is well-suited for integration in applications requiring file import functionality. It encapsulates UI, state, and logic for selecting JSON files through drag-and-drop or file dialog, providing a localized and streamlined user experience. The design leverages popular React patterns and Ant Design components, making it easy to extend or customize.

If you need additional details or integration instructions, please let me know!