Implementation:Ucbepic Docetl UseDatasetUpload

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

Overview

Concrete tool for the custom React hook that handles dataset file uploading to the DocETL backend.

Description

The useDatasetUpload hook provides two upload methods: uploadLocalDataset for uploading local JSON/CSV files from the user's filesystem, and uploadRemoteDataset for downloading datasets from remote URLs (including Google Drive links). Both methods send files to the backend's /fs/upload-file endpoint via FormData, handle file extension validation (JSON and CSV only), track upload progress with a loading state set, display toast notifications for success/failure, and convert all files to JSON format on the server side.

Usage

Used by the NaturalLanguagePipelineDialog, TutorialsDialog, and playground file management to handle dataset uploads.

Code Reference

Source Location

• Repository: Ucbepic_Docetl
• File: website/src/hooks/useDatasetUpload.ts
• Lines: 1-160

Signature

interface UseDatasetUploadOptions {
  namespace: string;
  onFileUpload: (file: File) => void;
  setCurrentFile: (file: File | null) => void;
}

export function useDatasetUpload(options: UseDatasetUploadOptions): {
  uploadLocalDataset: (file: File) => Promise<void>;
  uploadRemoteDataset: (url: string) => Promise<void>;
  uploadingFiles: Set<string>;
}

Import

import { useDatasetUpload } from "@/hooks/useDatasetUpload";

I/O Contract

Inputs (Props)

Name	Type	Required	Description
namespace	string	Yes	User namespace for file storage
onFileUpload	(file: File) => void	Yes	Callback when a file is uploaded
setCurrentFile	(file: File or null) => void	Yes	Set the active dataset file

Outputs

Name	Type	Description
uploadLocalDataset	function	Upload a local file to the backend
uploadRemoteDataset	function	Download and upload a file from a URL
uploadingFiles	Set<string>	Set of filenames currently being uploaded

Usage Examples

const { uploadLocalDataset, uploadRemoteDataset, uploadingFiles } = useDatasetUpload({
  namespace: "my-namespace",
  onFileUpload: (file) => addToFileList(file),
  setCurrentFile: setCurrentFile,
});

// Upload local file:
await uploadLocalDataset(selectedFile);

// Upload from URL:
await uploadRemoteDataset("https://example.com/data.json");

Related Pages

• Environment:Ucbepic_Docetl_Frontend_Node_Environment