Implementation:Infiniflow Ragflow UseFileRequest Hooks

Knowledge Sources	Infiniflow_Ragflow
Domains	Frontend, React_Hooks, File_Management
Last Updated	2026-02-12 06:00 GMT

Overview

Concrete React Query hooks for file management CRUD operations including listing, uploading, moving, and deleting files in the RAGFlow frontend.

Description

The use-file-request.ts module provides hooks for all file management operations: fetching file lists with pagination, uploading files, creating folders, moving files between folders, renaming files, deleting files, and linking files to knowledge bases.

Usage

Import these hooks in the file manager page and any component that needs to interact with the file management API.

Code Reference

Source Location

• Repository: Infiniflow_Ragflow
• File: web/src/hooks/use-file-request.ts
• Lines: 1-319

Signature

export function useFetchFileList(params: { parentId: string }): UseQueryResult;
export function useUploadFile(): UseMutationResult;
export function useMoveFile(): UseMutationResult;
export function useDeleteFile(): UseMutationResult;
export function useCreateFolder(): UseMutationResult;

Import

import { useFetchFileList, useUploadFile, useDeleteFile } from '@/hooks/use-file-request';

I/O Contract

Inputs

Name	Type	Required	Description
parentId	string	Yes	Parent folder ID for file listing

Outputs

Name	Type	Description
useFetchFileList()	UseQueryResult	Paginated file list data
useUploadFile()	UseMutationResult	Upload mutation with progress

Usage Examples

import { useFetchFileList, useDeleteFile } from '@/hooks/use-file-request';

function FileList({ folderId }) {
  const { data: files } = useFetchFileList({ parentId: folderId });
  const { mutate: deleteFile } = useDeleteFile();
  return files?.map(f => <FileRow key={f.id} file={f} onDelete={() => deleteFile(f.id)} />);
}

Related Pages

• Environment:Infiniflow_Ragflow_Frontend_Node_Environment