Implementation:Infiniflow Ragflow FileUploader Component

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

Overview

Concrete higher-level file upload UI component with preview, progress display, and toast notifications built on react-dropzone for the RAGFlow frontend.

Description

The FileUploader component wraps react-dropzone to provide a complete file upload experience with file preview cards, upload progress indicators, and toast-based error notification. Unlike the headless FileUpload component, this is an opinionated UI implementation.

Usage

Import this component when you need a ready-to-use file upload widget with visual feedback, typically in dialog or modal contexts for document upload.

Code Reference

Source Location

• Repository: Infiniflow_Ragflow
• File: web/src/components/file-uploader.tsx
• Lines: 1-360

Signature

export interface FileUploaderProps {
  value?: File[];
  onValueChange?: (files: File[]) => void;
  accept?: Record<string, string[]>;
  maxSize?: number;
  maxFiles?: number;
  onUpload?: (files: File[]) => Promise<void>;
  disabled?: boolean;
}

export function FileUploader(props: FileUploaderProps): JSX.Element;

Import

import { FileUploader } from '@/components/file-uploader';

I/O Contract

Inputs

Name	Type	Required	Description
value	File[]	No	Controlled file list
onValueChange	function	No	File list change callback
accept	Record	No	MIME type accept map
maxSize	number	No	Maximum file size in bytes
maxFiles	number	No	Maximum number of files
onUpload	function	No	Async upload handler

Outputs

Name	Type	Description
onValueChange callback	File[]	Updated file list
onUpload callback	Promise<void>	Upload completion

Usage Examples

import { FileUploader } from '@/components/file-uploader';

function UploadDialog() {
  const [files, setFiles] = useState<File[]>([]);

  return (
    <FileUploader
      value={files}
      onValueChange={setFiles}
      maxFiles={5}
      maxSize={50 * 1024 * 1024}
      accept={{ 'application/pdf': ['.pdf'] }}
      onUpload={async (files) => {
        await uploadToServer(files);
      }}
    />
  );
}

Related Pages

• Environment:Infiniflow_Ragflow_Frontend_Node_Environment