Implementation:Infiniflow Ragflow FilesHooks
| Knowledge Sources | |
|---|---|
| Domains | Frontend, File_Management, React_Hooks |
| Last Updated | 2026-02-12 06:00 GMT |
Overview
Concrete collection of React hooks for the file manager page providing folder ID extraction, row selection, file rename, knowledge base connection, and breadcrumb navigation.
Description
The hooks.ts module for the files page exports five hooks: useGetFolderId extracts the current folderId from URL search params; useGetRowSelection manages table row selection state with a guard that disables selection for knowledge-base source type entries; useRenameCurrentFile manages the rename modal lifecycle (show/hide/submit) calling useRenameFile API and auto-closing on success; useHandleConnectToKnowledge manages the link-to-KB modal with initial connected IDs derived from the file's kbs_info, calling useConnectToKnowledge API; useHandleBreadcrumbClick provides navigation via react-router's useNavigate for breadcrumb path clicks. The module also exports TypeScript utility types UseRenameCurrentFileReturnType and UseHandleConnectToKnowledgeReturnType for prop derivation in child components.
Usage
Imported by the Files page, FilesTable, and ActionCell components to compose file management behavior.
Code Reference
Source Location
- Repository: Infiniflow_Ragflow
- File: web/src/pages/files/hooks.ts
- Lines: 1-142
Signature
export const useGetFolderId: () => string;
export const useGetRowSelection: () => {
rowSelection: TableRowSelection<IFile>;
setSelectedRowKeys: React.Dispatch<React.SetStateAction<React.Key[]>>;
};
export const useRenameCurrentFile: () => {
fileRenameLoading: boolean;
initialFileName: string;
onFileRenameOk: (name: string) => Promise<void>;
fileRenameVisible: boolean;
hideFileRenameModal: () => void;
showFileRenameModal: (record: IFile) => Promise<void>;
};
export const useHandleConnectToKnowledge: () => {
initialConnectedIds: string[];
connectToKnowledgeLoading: boolean;
onConnectToKnowledgeOk: (knowledgeIds: string[]) => Promise<number>;
connectToKnowledgeVisible: boolean;
hideConnectToKnowledgeModal: () => void;
showConnectToKnowledgeModal: (record: IFile) => void;
};
export const useHandleBreadcrumbClick: () => {
handleBreadcrumbClick: (path?: string) => void;
};
Import
import {
useGetFolderId,
useRenameCurrentFile,
useHandleConnectToKnowledge,
useHandleBreadcrumbClick,
} from '@/pages/files/hooks';
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| (URL params) | string | Yes (for useGetFolderId) | folderId extracted from search params |
| record | IFile | Yes (for show modals) | File record to rename or connect |
Outputs
| Name | Type | Description |
|---|---|---|
| useGetFolderId() | string | Current folder ID from URL |
| useRenameCurrentFile() | object | Rename modal state, loading, callbacks |
| useHandleConnectToKnowledge() | object | Connect-to-KB modal state, initial IDs, callbacks |
| useHandleBreadcrumbClick() | object | Breadcrumb navigation handler |
Usage Examples
import { useRenameCurrentFile, useHandleConnectToKnowledge } from './hooks';
function FilesPage() {
const { showFileRenameModal, fileRenameVisible, onFileRenameOk } = useRenameCurrentFile();
const { showConnectToKnowledgeModal, connectToKnowledgeVisible } = useHandleConnectToKnowledge();
return (
<>
<FilesTable showFileRenameModal={showFileRenameModal} />
{connectToKnowledgeVisible && <LinkToDatasetDialog />}
</>
);
}