CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-uppy

Extensible JavaScript file upload widget with support for drag&drop, resumable uploads, previews, restrictions, file processing/encoding, remote providers like Instagram, Dropbox, Google Drive, S3 and more.

Pending
Overview
Eval results
Files

core-uppy.mddocs/

Core Uppy Class

The Core Uppy class is the central orchestrator for all file upload operations. It manages files, state, plugins, and the upload lifecycle through a comprehensive API that supports both programmatic and event-driven interactions.

Capabilities

Constructor

Creates a new Uppy instance with optional configuration.

/**
 * Create new Uppy instance
 * @param options - Configuration options for the Uppy instance
 */
constructor(options?: UppyOptions<M, B>);

Usage Example:

import { Uppy } from "uppy";

const uppy = new Uppy({
  debug: true,
  autoProceed: false,
  restrictions: {
    maxFileSize: 10 * 1024 * 1024, // 10MB
    maxNumberOfFiles: 5,
    allowedFileTypes: ['image/*', '.pdf']
  },
  meta: {
    username: 'john_doe'
  }
});

File Management

Comprehensive file management operations including adding, removing, and retrieving files.

/**
 * Add a single file to Uppy
 * @param file - File object or file options
 * @returns File ID of the added file
 */
addFile(file: UppyFile<M, B> | AddFileOptions<M, B>): string;

/**
 * Add multiple files to Uppy
 * @param files - Array of file objects or file options
 */
addFiles(files: (UppyFile<M, B> | AddFileOptions<M, B>)[]): void;

/**
 * Remove a specific file from Uppy
 * @param fileId - ID of the file to remove
 */
removeFile(fileId: string): void;

/**
 * Remove multiple files from Uppy
 * @param fileIds - Array of file IDs to remove (optional, defaults to all files)
 */
removeFiles(fileIds?: string[]): void;

/**
 * Get a specific file by ID
 * @param fileId - ID of the file to retrieve
 * @returns File object or undefined if not found
 */
getFile(fileId: string): UppyFile<M, B> | undefined;

/**
 * Get all files currently in Uppy
 * @returns Array of all file objects
 */
getFiles(): UppyFile<M, B>[];

/**
 * Remove all files from Uppy
 */
clear(): void;

Usage Examples:

// Add file from File input
const fileInput = document.querySelector('#file-input') as HTMLInputElement;
if (fileInput.files?.[0]) {
  const fileId = uppy.addFile({
    name: fileInput.files[0].name,
    type: fileInput.files[0].type,
    data: fileInput.files[0],
    meta: { source: 'file-input' }
  });
}

// Add files with restrictions check
uppy.addFiles([
  {
    name: 'document.pdf',
    type: 'application/pdf',
    data: pdfBlob,
    meta: { category: 'documents' }
  },
  {
    name: 'image.jpg', 
    type: 'image/jpeg',
    data: imageFile
  }
]);

// Get and modify file metadata
const file = uppy.getFile('file_id');
if (file) {
  uppy.setFileMeta(file.id, { 
    caption: 'Updated caption',
    tags: ['important', 'work']
  });
}

Upload Control

Control upload operations including starting, pausing, resuming, retrying, and canceling uploads.

/**
 * Start upload process for all files
 * @returns Promise resolving to upload result
 */
upload(): Promise<UploadResult<M, B>>;

/**
 * Pause all ongoing uploads
 */
pauseAll(): void;

/**
 * Resume all paused uploads
 */
resumeAll(): void;

/**
 * Retry all failed uploads
 * @returns Promise resolving to upload result
 */
retryAll(): Promise<UploadResult<M, B>>;

/**
 * Retry upload for a specific file
 * @param fileId - ID of the file to retry
 * @returns Promise resolving to upload result
 */
retryUpload(fileId: string): Promise<UploadResult<M, B>>;

/**
 * Cancel all ongoing uploads
 */
cancelAll(): void;

Usage Examples:

// Start upload with result handling
uppy.upload().then((result) => {
  console.log('Successful uploads:', result.successful);
  console.log('Failed uploads:', result.failed);
  
  if (result.failed.length > 0) {
    console.log('Some uploads failed, retrying...');
    return uppy.retryAll();
  }
}).catch((error) => {
  console.error('Upload failed:', error);
});

// Upload with pause/resume control
uppy.upload();
setTimeout(() => uppy.pauseAll(), 5000);  // Pause after 5 seconds
setTimeout(() => uppy.resumeAll(), 10000); // Resume after 10 seconds

Plugin Management

Manage Uppy plugins including installation, removal, and retrieval.

/**
 * Install a plugin to the Uppy instance
 * @param plugin - Plugin constructor/class
 * @param options - Plugin-specific options
 * @returns Uppy instance for chaining
 */
use<T extends BasePlugin<any, any, any>>(
  plugin: T, 
  options?: T extends BasePlugin<infer Options, any, any> ? Options : never
): this;

/**
 * Remove a plugin from the Uppy instance
 * @param instance - Plugin instance to remove
 */
removePlugin(instance: BasePlugin<any, any, any>): void;

/**
 * Get a plugin instance by ID
 * @param id - Plugin ID
 * @returns Plugin instance or undefined if not found
 */
getPlugin<T extends BasePlugin<any, any, any>>(id: string): T | undefined;

Usage Examples:

import { Uppy, Dashboard, Tus, XHRUpload } from "uppy";

// Chain plugin installations
const uppy = new Uppy()
  .use(Dashboard, { 
    target: '#uppy-dashboard',
    inline: true 
  })
  .use(Tus, { 
    endpoint: 'https://tusd.tusdemo.net/files/' 
  });

// Get plugin instance for configuration
const dashboard = uppy.getPlugin('Dashboard');
if (dashboard) {
  dashboard.openModal();
}

// Remove and replace plugin
const tusPlugin = uppy.getPlugin('Tus');
if (tusPlugin) {
  uppy.removePlugin(tusPlugin);
  uppy.use(XHRUpload, { 
    endpoint: '/api/upload' 
  });
}

State Management

Access and modify the internal Uppy state including global and file-specific metadata.

/**
 * Get current Uppy state
 * @returns Complete state object
 */
getState(): State<M, B>;

/**
 * Update Uppy state with partial state object
 * @param patch - Partial state object to merge
 */
setState(patch: Partial<State<M, B>>): void;

/**
 * Set global metadata for all files
 * @param data - Metadata object to set
 */
setMeta(data: Partial<M>): void;

/**
 * Set metadata for a specific file
 * @param fileId - ID of the file to update
 * @param data - Metadata object to set
 */
setFileMeta(fileId: string, data: Partial<M>): void;

Usage Examples:

// Get current state
const state = uppy.getState();
console.log('Current files:', Object.keys(state.files).length);
console.log('Total progress:', state.totalProgress);

// Set global metadata
uppy.setMeta({
  projectId: 'abc123',
  uploadedBy: 'user@example.com'
});

// Set file-specific metadata
uppy.setFileMeta('file_id', {
  caption: 'Profile picture',
  altText: 'User avatar image'
});

// Listen for state changes
uppy.on('state-update', (prev, next, patch) => {
  console.log('State updated:', patch);
});

Event System

Comprehensive event system for listening to upload lifecycle, file management, and plugin interactions.

/**
 * Add event listener
 * @param event - Event name
 * @param callback - Event handler function
 * @returns Uppy instance for chaining
 */
on<K extends keyof UppyEventMap<M, B>>(
  event: K, 
  callback: UppyEventMap<M, B>[K]
): this;

/**
 * Remove event listener
 * @param event - Event name
 * @param callback - Event handler function to remove
 * @returns Uppy instance for chaining
 */
off<K extends keyof UppyEventMap<M, B>>(
  event: K, 
  callback: UppyEventMap<M, B>[K]
): this;

/**
 * Emit an event
 * @param event - Event name
 * @param args - Event arguments
 */
emit<K extends keyof UppyEventMap<M, B>>(
  event: K, 
  ...args: Parameters<UppyEventMap<M, B>[K]>
): void;

Usage Examples:

// File management events
uppy.on('file-added', (file) => {
  console.log('File added:', file.name);
});

uppy.on('file-removed', (file, reason) => {
  console.log('File removed:', file.name, 'Reason:', reason);
});

// Upload lifecycle events
uppy.on('upload-start', (data) => {
  console.log('Upload started for files:', data.fileIDs);
});

uppy.on('upload-progress', (file, progress) => {
  console.log(`${file.name}: ${progress.percentage}%`);
});

uppy.on('upload-success', (file, response) => {
  console.log('Upload successful:', file.name, response);
});

uppy.on('upload-error', (file, error, response) => {
  console.error('Upload failed:', file.name, error);
});

uppy.on('complete', (result) => {
  console.log('All uploads complete');
  console.log('Successful:', result.successful.length);
  console.log('Failed:', result.failed.length);
});

// Remove event listener
const progressHandler = (file, progress) => {
  console.log(`Progress: ${progress.percentage}%`);
};

uppy.on('upload-progress', progressHandler);
// Later...
uppy.off('upload-progress', progressHandler);

Core Configuration Types

interface UppyOptions<M extends Meta = {}, B extends Body = {}> {
  id?: string;
  autoProceed?: boolean;
  allowMultipleUploads?: boolean;
  debug?: boolean;
  restrictions?: Restrictions;
  meta?: M;
  onBeforeFileAdded?: (
    currentFile: UppyFile<M, B>, 
    files: { [fileId: string]: UppyFile<M, B> }
  ) => UppyFile<M, B> | boolean | undefined;
  onBeforeUpload?: (
    files: { [fileId: string]: UppyFile<M, B> }
  ) => { [fileId: string]: UppyFile<M, B> } | boolean | undefined;
  locale?: Locale;
  store?: Store;
  logger?: Logger;
  infoTimeout?: number;
}

interface AddFileOptions<M extends Meta = {}, B extends Body = {}> {
  name: string;
  type?: string;
  data: Blob | File;
  meta?: M;
  source?: string;
  isRemote?: boolean;
}

interface Restrictions {
  maxFileSize?: number | null;
  minFileSize?: number | null;
  maxTotalFileSize?: number | null;
  maxNumberOfFiles?: number | null;
  minNumberOfFiles?: number | null;
  allowedFileTypes?: string[] | null;
  requiredMetaFields?: string[];
}

Key Events

interface UppyEventMap<M extends Meta = {}, B extends Body = {}> {
  // File events
  'file-added': (file: UppyFile<M, B>) => void;
  'file-removed': (file: UppyFile<M, B>, reason?: string) => void;
  'files-added': (files: UppyFile<M, B>[]) => void;
  
  // Upload events
  'upload': (data: { id: string; fileIDs: string[] }) => void;
  'upload-start': (data: { id: string; fileIDs: string[] }) => void;
  'upload-progress': (file: UppyFile<M, B>, progress: FileProgress) => void;
  'upload-success': (file: UppyFile<M, B>, response: UploadSuccessResponse<B>) => void;
  'upload-error': (file: UppyFile<M, B>, error: Error, response?: UploadErrorResponse<M, B>) => void;
  'upload-retry': (fileId: string) => void;
  'complete': (result: UploadResult<M, B>) => void;
  
  // State events
  'state-update': (prev: State<M, B>, next: State<M, B>, patch: Partial<State<M, B>>) => void;
  'info-visible': () => void;
  'info-hidden': () => void;
  
  // Restriction events
  'restriction-failed': (file: UppyFile<M, B>, error: Error) => void;
  
  // Cancel events
  'cancel-all': () => void;
  'file-editor:cancel': (file?: UppyFile<M, B>) => void;
  'file-editor:complete': (file?: UppyFile<M, B>) => void;
}

Install with Tessl CLI

npx tessl i tessl/npm-uppy

docs

cloud-providers.md

core-uppy.md

file-sources.md

index.md

plugin-architecture.md

typescript-support.md

ui-plugins.md

upload-handlers.md

utility-plugins.md

tile.json