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.
—
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.
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'
}
});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']
});
}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 secondsManage 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'
});
}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);
});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);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[];
}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