Implementation:Ucbepic Docetl File Upload And Operation Card

Knowledge Sources	DocETL
Domains	User_Interface, Data_Engineering
Last Updated	2026-02-08 01:40 GMT

Overview

Concrete UI components and API endpoints for dataset upload and operation configuration in the DocETL playground.

Description

The playground uses FileExplorer (React component) for dataset management and OperationCard (React component) for operation configuration. The backend provides POST /upload-file for file uploads and POST /save-documents for document storage. CSV files are auto-converted to JSON. Operations are configured through cards with prompt editors, schema builders, and parameter controls.

Usage

In the playground UI, use the file panel to upload datasets and the pipeline editor to add and configure operations. Each operation card provides controls for prompt editing, output schema definition, model selection, and advanced parameters.

Code Reference

Source Location

• Repository: docetl
• File: server/app/routes/filesystem.py (L82-191), website/src/components/FileExplorer.tsx (L63-200), website/src/components/OperationCard.tsx (L708-1209)

Signature

# Backend file upload endpoint
@router.post("/upload-file")
async def upload_file(
    file: UploadFile | None = File(None),
    url: str | None = Form(None),
    namespace: str = Form(...),
) -> dict:
    """Upload file or download from URL. Returns {"path": str}."""

// Frontend components
function FileExplorer({ namespace }: { namespace: string }): JSX.Element
function OperationCard({ operation, onUpdate }: OperationCardProps): JSX.Element

Import

# Backend: included via app.include_router(filesystem.router)
# Frontend: React component imports

I/O Contract

Inputs

Name	Type	Required	Description
file	UploadFile	Conditional	Direct file upload
url	str	Conditional	URL to download file from
namespace	str	Yes	Isolation namespace

Outputs

Name	Type	Description
upload response	{"path": str}	Server path of uploaded file
operation cards	UI components	Configured operations in pipeline editor

Usage Examples

# Upload file via API
curl -X POST http://localhost:8000/upload-file \
  -F "file=@data.json" \
  -F "namespace=my_project"

Related Pages

Implements Principle

• Principle:Ucbepic_Docetl_Dataset_Upload_And_Operation_Creation

Requires Environment

• Environment:Ucbepic_Docetl_Frontend_Node_Environment