Implementation:Infiniflow Ragflow FileUpload Component

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

Overview

Concrete headless file upload component system with drag-drop, validation, and progress tracking built on Radix UI primitives for the RAGFlow frontend.

Description

The FileUpload compound component provides a composable file upload system: FileUpload.Root (state container), FileUpload.Dropzone (drag-drop area), FileUpload.Trigger (click trigger), FileUpload.List (file list), FileUpload.Item (individual file), FileUpload.ItemProgress (progress with linear/circular/fill variants), and FileUpload.Clear (clear all). Uses Zustand-like internal store via useFileUpload hook.

Usage

Import this component system for building document upload interfaces in the knowledge base, file manager, or data pipeline features.

Code Reference

Source Location

• Repository: Infiniflow_Ragflow
• File: web/src/components/file-upload.tsx
• Lines: 1-1429

Signature

export const FileUpload = {
  Root: FileUploadRoot,
  Dropzone: FileUploadDropzone,
  Trigger: FileUploadTrigger,
  List: FileUploadList,
  Item: FileUploadItem,
  ItemPreview: FileUploadItemPreview,
  ItemProgress: FileUploadItemProgress,
  ItemDelete: FileUploadItemDelete,
  Clear: FileUploadClear,
};

export function useFileUpload<T>(selector: (state: StoreState) => T): T;

Import

import { FileUpload, useFileUpload } from '@/components/file-upload';

I/O Contract

Inputs

Name	Type	Required	Description
accept	string	No	Accepted MIME types
maxFiles	number	No	Maximum number of files
maxSize	number	No	Maximum file size in bytes
onUpload	function	No	Upload handler receiving File[]
onFileReject	function	No	Rejection callback

Outputs

Name	Type	Description
useFileUpload()	StoreState	Current upload state (files, progress, status)

Usage Examples

import { FileUpload } from '@/components/file-upload';

function DocumentUploader() {
  return (
    <FileUpload.Root maxFiles={10} accept="application/pdf,.docx">
      <FileUpload.Dropzone>
        <FileUpload.Trigger>Click or drag files here</FileUpload.Trigger>
      </FileUpload.Dropzone>
      <FileUpload.List>
        {(files) => files.map(file => (
          <FileUpload.Item key={file.id} file={file}>
            <FileUpload.ItemPreview />
            <FileUpload.ItemProgress variant="linear" />
            <FileUpload.ItemDelete />
          </FileUpload.Item>
        ))}
      </FileUpload.List>
    </FileUpload.Root>
  );
}

Related Pages

• Environment:Infiniflow_Ragflow_Frontend_Node_Environment