Implementation:FlowiseAI Flowise DocumentLoaderListDialog
| Knowledge Sources | |
|---|---|
| Domains | Document Store, Dialogs |
| Last Updated | 2026-02-12 07:00 GMT |
Overview
DocumentLoaderListDialog is a React dialog component that fetches and displays a searchable, grid-based list of available document loaders from the document store API, allowing users to select a loader by name.
Description
This component renders a Material UI Dialog via createPortal into the #portal element. On mount, it calls documentStoreApi.getDocumentLoaders through the useApi hook and populates a 3-column grid of ListItemButton elements, each showing a circular icon (from /api/v1/node-icon/{name}) and the loader's label. A sticky search bar filters loaders by name using a case-insensitive substring match. When a loader is clicked, the onDocLoaderSelected callback is invoked with the loader's name string (not the full object). The component dispatches SHOW_CANVAS_DIALOG/HIDE_CANVAS_DIALOG Redux actions on open/close.
Usage
Use this component in the document store views when the user needs to add a new document loader to a document store. It is typically opened from an "Add Document Loader" button and presents all available loader types for selection.
Code Reference
Source Location
- Repository: FlowiseAI Flowise
- File: packages/ui/src/views/docstore/DocumentLoaderListDialog.jsx
- Lines: 1-193
Signature
const DocumentLoaderListDialog = ({ show, dialogProps, onCancel, onDocLoaderSelected }) => { ... }
export default DocumentLoaderListDialog
Import
import DocumentLoaderListDialog from '@/views/docstore/DocumentLoaderListDialog'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| show | boolean | Yes | Controls dialog visibility |
| dialogProps | object | Yes | Dialog configuration containing title (string) and optionally documentLoaders (array to pre-populate)
|
| onCancel | function | Yes | Callback invoked when the dialog is closed |
| onDocLoaderSelected | function | Yes | Callback invoked with the selected document loader's name string when a list item is clicked
|
Outputs
| Name | Type | Description |
|---|---|---|
| Rendered JSX (portal) | React Element | A Dialog containing a sticky search bar and a 3-column grid of selectable document loader buttons with icons |
| onDocLoaderSelected callback | void | Called with the loader name string (e.g., 'pdfFile') when the user selects a document loader
|
Usage Examples
Basic Usage
import DocumentLoaderListDialog from '@/views/docstore/DocumentLoaderListDialog'
<DocumentLoaderListDialog
show={showDialog}
dialogProps={{ title: 'Select Document Loader' }}
onCancel={() => setShowDialog(false)}
onDocLoaderSelected={(loaderName) => handleLoaderSelected(loaderName)}
/>