Implementation:FlowiseAI Flowise DocStoreInputHandler

Knowledge Sources	FlowiseAI Flowise
Domains	UI Components, Document Store, Form Inputs
Last Updated	2026-02-12 07:00 GMT

Overview

DocStoreInputHandler is a React component that dynamically renders the appropriate input control for a given node parameter within the document store configuration interface.

Description

This component acts as a universal input renderer for document store node parameters. Based on the inputParam.type, it renders the correct UI widget: text inputs, password fields, dropdowns, multi-selects, async dropdowns, file uploaders, boolean switches, JSON editors, code editors, data grids, credential selectors, or array renderers. It also supports expand-to-fullscreen dialogs for text and code fields, warning banners, and a "Manage Links" dialog for web scraper nodes.

Usage

Use this component when rendering input fields for document store node configurations. It is typically mapped over an array of inputParams from a node's definition within the document store setup flow.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/views/docstore/DocStoreInputHandler.jsx
• Lines: 1-322

Signature

const DocStoreInputHandler = ({ inputParam, data, disabled = false, onNodeDataChange }) => {
    // ... component logic
}

DocStoreInputHandler.propTypes = {
    inputParam: PropTypes.object,
    data: PropTypes.object,
    disabled: PropTypes.bool,
    onNodeDataChange: PropTypes.func
}

export default DocStoreInputHandler

Import

import DocStoreInputHandler from '@/views/docstore/DocStoreInputHandler'

I/O Contract

Inputs

Name	Type	Required	Description
inputParam	object	Yes	The parameter definition including name, label, type, options, default, optional, warning, description, etc.
data	object	Yes	The node data object containing an inputs map where values are stored and read
disabled	bool	No	When true, disables all input controls (defaults to false)
onNodeDataChange	func	No	Optional callback for notifying parent of data changes; falls back to flowContext.onNodeDataChange

Outputs

Name	Type	Description
Rendered JSX	React.Element	The appropriate input widget based on inputParam.type, plus expand and manage-links dialogs

Supported Input Types

inputParam.type	Rendered Component
credential	CredentialInputHandler
file	File
boolean	SwitchInput
datagrid	DataGrid
code	CodeEditor
string / password / number	Input
json	JsonEditorInput
options	Dropdown
multiOptions	MultiDropdown
asyncOptions / asyncMultiOptions	AsyncDropdown (with optional refresh button)
array	ArrayRenderer

Key Functions

Function	Description
handleDataChange({ inputParam, newValue })	Updates data.inputs and triggers onNodeDataChange for show/hide logic on specific input types
onExpandDialogClicked(value, inputParam)	Opens the fullscreen text expand dialog for string/code inputs
onManageLinksDialogClicked(url, selectedLinks, relativeLinksMethod, limit)	Opens the manage scraped links dialog for web scraper nodes
getCredential()	Extracts the credential value from data.inputs

Usage Examples

Basic Usage

import DocStoreInputHandler from '@/views/docstore/DocStoreInputHandler'

{nodeData.inputParams.map((inputParam, index) => (
    <DocStoreInputHandler
        key={index}
        inputParam={inputParam}
        data={nodeData}
        disabled={false}
        onNodeDataChange={handleNodeDataChange}
    />
))}

Related Pages

• Principle:FlowiseAI_Flowise_Document_Processing