use-upload-file.ts

Overview

The use-upload-file.ts file defines a custom React hook named useHandleUploadFile that manages the state and behavior related to uploading files within a folder context. This hook integrates modal visibility controls, file upload request handling, and folder identification retrieval to provide a cohesive interface for file upload operations in a React application.

Key functionalities include:

• Managing the show/hide state of a file upload modal dialog.

• Handling asynchronous file upload requests, associating uploads with a specific folder ID.

• Providing loading state feedback during file uploads.

• Returning upload status codes and controlling modal visibility based on upload success.

This hook is primarily designed to be used in components that require file upload capabilities with modal dialogs and folder context awareness.

Detailed Explanation of Contents

Imports

• UploadFormSchemaType: Type definition for the file upload form data, imported from the file upload dialog component.

• useSetModalState: Custom hook managing modal visibility state (show/hide).

• useUploadFile: Custom hook providing file upload functionality and loading state.

• useCallback: React hook to memoize callback functions.

• useGetFolderId: Custom hook retrieving the current folder's ID where files should be uploaded.

useHandleUploadFile Hook

Description

useHandleUploadFile is a custom React hook that encapsulates all logic for handling file uploads within a folder, including modal visibility management and asynchronous upload operations.

Return Value

An object containing:

Internal Variables and Methods

• fileUploadVisible, hideFileUploadModal, showFileUploadModal: Derived from useSetModalState(). Control modal visibility.

• uploadFile, loading: From useUploadFile(). uploadFile is the async function to upload files; loading indicates upload progress.

• id: Folder ID from useGetFolderId(). Associates uploaded files with the correct folder.

• onFileUploadOk: Async callback, memoized with useCallback. When invoked with the form data containing fileList:

  • Checks if fileList is non-empty.

  • Calls uploadFile with fileList and parentId set to the current folder ID.

  • If upload returns 0 (assumed to mean success), hides the modal.

  • Returns the upload status code or undefined.

Parameters

onFileUploadOk accepts a single parameter:

• data: UploadFormSchemaType

  • fileList: Array of files to upload.

Return Values

• number: Status code returned from the upload operation (e.g., 0 for success).

• undefined: If no files were provided for upload.

Usage Example

import React from 'react';
import { useHandleUploadFile } from './use-upload-file';

const FileUploadComponent = () => {
  const {
    fileUploadLoading,
    onFileUploadOk,
    fileUploadVisible,
    hideFileUploadModal,
    showFileUploadModal,
  } = useHandleUploadFile();

  const handleUploadConfirm = async (formData) => {
    const result = await onFileUploadOk(formData);
    if (result === 0) {
      console.log('Upload successful');
    }
  };

  return (
    <>
      <button onClick={showFileUploadModal}>Upload Files</button>
      {fileUploadVisible && (
        <FileUploadDialog
          loading={fileUploadLoading}
          onConfirm={handleUploadConfirm}
          onCancel={hideFileUploadModal}
        />
      )}
    </>
  );
};

Implementation Details

• Modal State Management: Uses useSetModalState to track and toggle the visibility of the upload modal dialog, abstracting modal control away from UI components.

• File Upload Logic: Utilizes useUploadFile to perform the actual file upload process asynchronously. This hook likely handles API requests and error management internally.

• Folder Context: useGetFolderId provides the current folder ID to ensure files are uploaded to the correct location.

• Performance Optimization: Uses useCallback to memoize the onFileUploadOk function, preventing unnecessary re-renders or re-creations of this callback in consuming components.

• Conditional Modal Hide: The modal is hidden only when the upload returns a success code 0. This indicates the operation succeeded and the UI can close the dialog.

Interaction with Other Parts of the System

• File Upload Dialog Component (@/components/file-upload-dialog): The hook expects form data shaped as UploadFormSchemaType, which is defined in the file upload dialog component. The dialog component uses this hook to handle uploads.

• Modal State Hook (@/hooks/common-hooks): Provides generic modal state management used by the upload modal.

• File Request Hook (@/hooks/use-file-request): Implements the actual file upload API calls and loading state.

• Folder ID Hook (./hooks): Retrieves the folder context, likely from routing or application state, determining the target folder for uploads.

Mermaid Diagram

The following flowchart illustrates the main functions within this file and their relationships:

flowchart TD
    A[useHandleUploadFile Hook]
    A --> B[useSetModalState]
    A --> C[useUploadFile]
    A --> D[useGetFolderId]
    A --> E[onFileUploadOk(fileList)]
    E -->|calls| C[uploadFile({ fileList, parentId: id })]
    E -->|on success (0)| B[hideFileUploadModal]

Summary

use-upload-file.ts provides a focused and reusable custom hook to integrate file upload functionality with modal UI control and folder context. It abstracts away the complexities of managing modal visibility and asynchronous upload requests while exposing a clean interface for components to trigger uploads and respond to their status.

This modular design promotes separation of concerns and allows easy extension or replacement of underlying upload or modal logic without impacting consuming components.