Implementation:Infiniflow Ragflow Files Page
| Knowledge Sources | |
|---|---|
| Domains | Frontend, File_Management |
| Last Updated | 2026-02-12 06:00 GMT |
Overview
Concrete React page component serving as the top-level file manager with file listing, upload, folder creation, bulk operations, and move/link-to-KB dialogs.
Description
The Files page component orchestrates the file management view. It composes multiple hooks and sub-components: useFetchFileList for paginated file data with search, useRowSelection for table row selection state, useHandleUploadFile for the file upload dialog, useHandleCreateFolder for folder creation, useHandleMoveFile for the move dialog, and useBulkOperateFile for generating bulk operation actions. The layout includes a ListFilterBar header with breadcrumb navigation (via useSelectBreadcrumbItems) and a dropdown menu offering "Upload File" and "New Folder" options. When rows are selected, a BulkOperateBar appears with batch actions. The main content is a FilesTable with pagination. Three conditional dialogs are rendered: FileUploadDialog, CreateFolderDialog, and MoveDialog.
Usage
Accessed as the /files route in the RAGFlow application for managing user-uploaded files and folders.
Code Reference
Source Location
- Repository: Infiniflow_Ragflow
- File: web/src/pages/files/index.tsx
- Lines: 1-153
Signature
export default function Files(): JSX.Element;
// No props; relies on URL state and composed hooks
Import
import Files from '@/pages/files';
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| (URL params) | string | No | folderId from search params for sub-folder navigation |
Outputs
| Name | Type | Description |
|---|---|---|
| Page JSX | ReactNode | Full file manager page with table, toolbar, dialogs, and bulk operations |
Usage Examples
// Mounted via route configuration
import Files from '@/pages/files';
// In route config:
{ path: '/files', component: Files }