Implementation:Infiniflow Ragflow CreateFolderForm Component

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

Overview

Concrete React form component for creating a new folder with Zod schema validation and async submission handling.

Description

The CreateFolderForm component renders a simple form with a single name input field validated via a Zod schema that requires a non-empty trimmed string. The form uses react-hook-form with zodResolver for validation. On submission, it calls the async onOk callback with the folder name; if the callback returns a truthy value (indicating success), it automatically calls hideModal to close the parent dialog. The form element is assigned the TagRenameId constant as its id attribute, enabling external submit button binding from the parent dialog.

Usage

Rendered inside the CreateFolderDialog component in the file manager page.

Code Reference

Source Location

Repository: Infiniflow_Ragflow
File: web/src/pages/files/create-folder-dialog/create-folder-form.tsx
Lines: 1-70

Signature

export function CreateFolderForm({
  hideModal,
  onOk,
}: IModalProps<any>): JSX.Element;

// Zod schema:
// z.object({ name: z.string().min(1).trim() })

Import

import { CreateFolderForm } from '@/pages/files/create-folder-dialog/create-folder-form';

I/O Contract

Inputs

Name	Type	Required	Description
hideModal	function	No	Callback to close the parent dialog on successful submission
onOk	function	No	Async callback receiving the folder name string; returns truthy on success

Outputs

Name	Type	Description
Form JSX	ReactNode	Form element with name input and validation, bound to TagRenameId for external submit

Usage Examples

import { CreateFolderForm } from './create-folder-form';

function CreateFolderDialog({ hideModal, onOk, loading }) {
  return (
    <Dialog open>
      <DialogContent>
        <CreateFolderForm hideModal={hideModal} onOk={onOk} />
        <DialogFooter>
          <Button type="submit" form={TagRenameId} loading={loading}>
            Create
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment