Implementation:Ucbepic Docetl FileOperations

Knowledge Sources	Ucbepic_Docetl
Domains	Frontend, React_UI
Last Updated	2026-02-08 00:00 GMT

Overview

Concrete tool for the file save/load utility functions that persist and restore pipeline configurations as .dtl files.

Description

This module provides saveToFile and loadFromFile functions for persisting complete pipeline state to the user's local filesystem using the File System Access API (showSaveFilePicker / showOpenFilePicker). When saving, it optionally fetches the current dataset content from the backend and embeds it in the saved file under a __fileContents key. When loading, it extracts embedded file contents, uploads them back to the backend, and restores file references. The format is JSON with a .dtl extension. A helper processFileContents function handles re-uploading embedded datasets.

Usage

Used by the playground toolbar's save/load buttons to persist and restore entire pipeline configurations including dataset files.

Code Reference

Source Location

• Repository: Ucbepic_Docetl
• File: website/src/utils/fileOperations.ts
• Lines: 1-267

Signature

interface SaveFileOptions {
  currentFile: File | null;
  namespace: string;
}

interface RestoreFileHandlers {
  setFiles: (updater: (prev: File[]) => File[]) => void;
  setCurrentFile: (file: File | null) => void;
}

export const saveToFile: (
  data: PipelineData,
  defaultFilename: string,
  options?: SaveFileOptions
) => Promise<void>

export const loadFromFile: (
  handlers?: RestoreFileHandlers
) => Promise<PipelineData>

Import

import { saveToFile, loadFromFile } from "@/utils/fileOperations";

I/O Contract

Inputs (Props)

Name	Type	Required	Description
data	PipelineData	Yes	Pipeline state object to save (for saveToFile)
defaultFilename	string	Yes	Suggested filename (for saveToFile)
options	SaveFileOptions	No	Options including current file and namespace
handlers	RestoreFileHandlers	No	File state setters (for loadFromFile)

Outputs

Name	Type	Description
(saveToFile)	void	Saves pipeline data to a .dtl file
(loadFromFile)	PipelineData	Loaded pipeline data from a .dtl file

Usage Examples

import { saveToFile, loadFromFile } from "@/utils/fileOperations";

// Save pipeline:
await saveToFile(pipelineState, "my-pipeline.dtl", {
  currentFile: currentFile,
  namespace: "my-namespace",
});

// Load pipeline:
const data = await loadFromFile({
  setFiles: (updater) => setFiles(updater),
  setCurrentFile: setCurrentFile,
});

Related Pages

• Environment:Ucbepic_Docetl_Frontend_Node_Environment