Implementation:Infiniflow Ragflow AvatarUpload Component

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

Overview

Concrete React component for image upload with drag-to-crop functionality and base64 conversion provided by the RAGFlow frontend.

Description

The AvatarUpload component provides an image upload widget with canvas-based cropping. It uses a forwardRef pattern for external input control, supports base64 encoding, and includes a visual crop overlay with drag-and-resize functionality.

Usage

Import this component when building profile or entity creation forms that require avatar/image upload with cropping capabilities.

Code Reference

Source Location

• Repository: Infiniflow_Ragflow
• File: web/src/components/avatar-upload.tsx
• Lines: 1-376

Signature

export interface AvatarUploadProps {
  value?: string;
  onChange?: (value: string) => void;
  tips?: string;
}

export const AvatarUpload = forwardRef<HTMLInputElement, AvatarUploadProps>(
  function AvatarUpload({ value, onChange, tips }, ref)
)

Import

import { AvatarUpload } from '@/components/avatar-upload';

I/O Contract

Inputs

Name	Type	Required	Description
value	string	No	Current avatar image as base64 string
onChange	function	No	Callback when cropped image is produced
tips	string	No	Helper text displayed below upload area

Outputs

Name	Type	Description
onChange callback	string	Base64-encoded cropped image data

Usage Examples

import { AvatarUpload } from '@/components/avatar-upload';

function ProfileForm() {
  const [avatar, setAvatar] = useState('');

  return (
    <AvatarUpload
      value={avatar}
      onChange={setAvatar}
      tips="Upload a profile photo"
    />
  );
}

Related Pages

• Environment:Infiniflow_Ragflow_Frontend_Node_Environment