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

Utility Plugins

Name: tessl/npm-uppy
Author: tessl

Utility plugins provide supporting functionality including file processing, state management, form integration, crash recovery, and development tools.

Capabilities

File Processing Utilities

Plugins that process files and generate additional metadata or assets.

/**
 * Thumbnail generator for image and video previews
 */
class ThumbnailGenerator<M extends Meta = {}, B extends Body = {}> extends BasePlugin<ThumbnailGeneratorOptions> {
  constructor(uppy: Uppy<M, B>, options?: ThumbnailGeneratorOptions);
}

interface ThumbnailGeneratorOptions {
  thumbnailWidth?: number;
  thumbnailHeight?: number;
  thumbnailType?: string;
  thumbnailQuality?: number;
  waitForThumbnailsBeforeUpload?: boolean;
  lazy?: boolean;
  locale?: Locale;
}

Usage Example:

import { Uppy, ThumbnailGenerator } from "uppy";

const uppy = new Uppy()
  .use(ThumbnailGenerator, {
    thumbnailWidth: 300,
    thumbnailHeight: 300,
    thumbnailType: 'image/jpeg',
    thumbnailQuality: 0.8,
    waitForThumbnailsBeforeUpload: false,
    lazy: true // Generate thumbnails only when needed
  });

// Listen for thumbnail generation
uppy.on('thumbnail:generated', (file, preview) => {
  console.log('Thumbnail generated for:', file.name);
  // Display preview in UI
  const img = document.querySelector(`[data-file-id="${file.id}"] img`);
  if (img) {
    img.src = preview;
  }
});

State Management and Recovery

Plugins for managing upload state and recovering from interruptions.

/**
 * Golden Retriever for crash recovery and file restoration
 */
class GoldenRetriever<M extends Meta = {}, B extends Body = {}> extends BasePlugin<GoldenRetrieverOptions> {
  constructor(uppy: Uppy<M, B>, options?: GoldenRetrieverOptions);
}

interface GoldenRetrieverOptions {
  expires?: number;
  serviceWorker?: boolean;
  indexedDB?: {
    maxFileSize?: number;
    maxTotalSize?: number;
  };
  locale?: Locale;
}

/**
 * Redux DevTools integration for debugging
 */
class ReduxDevTools<M extends Meta = {}, B extends Body = {}> extends BasePlugin<any> {
  constructor(uppy: Uppy<M, B>, options?: any);
}

Usage Examples:

// Golden Retriever for crash recovery
uppy.use(GoldenRetriever, {
  expires: 24 * 60 * 60 * 1000, // 24 hours
  serviceWorker: true,
  indexedDB: {
    maxFileSize: 50 * 1024 * 1024, // 50MB per file
    maxTotalSize: 200 * 1024 * 1024 // 200MB total
  }
});

// Redux DevTools for debugging (development only)
if (process.env.NODE_ENV === 'development') {
  uppy.use(ReduxDevTools);
}

Form Integration

Plugins that integrate Uppy with HTML forms and collect metadata.

/**
 * Form integration for metadata collection and submission
 */
class Form<M extends Meta = {}, B extends Body = {}> extends BasePlugin<FormOptions> {
  constructor(uppy: Uppy<M, B>, options?: FormOptions);
}

interface FormOptions {
  target?: string | HTMLFormElement;
  resultName?: string;
  getMetaFromForm?: boolean;
  addResultToForm?: boolean;
  multipleResults?: boolean;
  submitOnSuccess?: boolean;
  triggerUploadOnSubmit?: boolean;
  locale?: Locale;
}

Usage Example:

// Form integration
uppy.use(Form, {
  target: '#upload-form',
  resultName: 'uppyResult',
  getMetaFromForm: true,
  addResultToForm: true,
  submitOnSuccess: true,
  triggerUploadOnSubmit: true
});

// The form will collect metadata from form fields
// and submit automatically after successful upload

State Store Plugins

Alternative state management implementations.

/**
 * Default state store implementation
 */
class DefaultStore<M extends Meta = {}, B extends Body = {}> extends BasePlugin<any> {
  constructor(uppy: Uppy<M, B>, options?: any);
}

/**
 * Redux store integration for state management
 */
class ReduxStore<M extends Meta = {}, B extends Body = {}> extends BasePlugin<ReduxStoreOptions> {
  constructor(uppy: Uppy<M, B>, options?: ReduxStoreOptions);
}

interface ReduxStoreOptions {
  store: any; // Redux store instance
  id?: string;
  selector?: (state: any) => any;
}

Usage Example:

import { createStore } from 'redux';
import { ReduxStore } from 'uppy';

// Create Redux store
const store = createStore(rootReducer);

// Use Redux store with Uppy
const uppy = new Uppy({
  store: ReduxStore,
  id: 'uppy',
  selector: (state) => state.uppy
});

Development and Debugging

Tools for development, debugging, and monitoring.

/**
 * Debug logger utility
 */
interface DebugLogger {
  debug(...args: any[]): void;
  info(...args: any[]): void;
  warn(...args: any[]): void;
  error(...args: any[]): void;
}

/**
 * Create debug logger instance
 */
function debugLogger(namespace?: string): DebugLogger;

Usage Example:

import { debugLogger } from 'uppy';

// Create namespaced logger
const logger = debugLogger('MyApp');

// Use logger in plugin or application
logger.info('Uppy initialized');
logger.warn('File size exceeds limit');
logger.error('Upload failed', error);

// Enable debug logging in browser console
localStorage.setItem('debug', 'uppy:*');

Utility Plugin Events

// Thumbnail generation events
interface ThumbnailEvents<M extends Meta = {}, B extends Body = {}> {
  'thumbnail:generated': (file: UppyFile<M, B>, preview: string) => void;
  'thumbnail:error': (file: UppyFile<M, B>, error: Error) => void;
}

// Golden Retriever events
interface GoldenRetrieverEvents {
  'restored': () => void; 
}

// Form integration events
interface FormEvents {
  'form:submit': (formData: FormData) => void;
  'form:meta-collected': (meta: { [key: string]: any }) => void;
}

Configuration Interfaces

/**
 * Common utility plugin options
 */
interface BaseUtilityOptions {
  locale?: Locale;
}

/**
 * File processing options
 */
interface FileProcessingOptions {
  waitForProcessingBeforeUpload?: boolean;
  processInBackground?: boolean;
  processingTimeout?: number;
}

/**
 * Storage configuration for persistent plugins
 */
interface StorageConfig {
  provider: 'localStorage' | 'sessionStorage' | 'indexedDB' | 'memory';
  key?: string;
  expires?: number;
  maxSize?: number;
}

/**
 * Metadata collection configuration
 */
interface MetadataCollectionOptions {
  collectFromForm?: boolean;
  formSelector?: string;
  fieldMapping?: { [formField: string]: string };
  requiredFields?: string[];
  validateMetadata?: (meta: any) => boolean | string;
}

Performance and Optimization

/**
 * Performance monitoring utilities
 */
interface PerformanceMonitor {
  startTimer(label: string): void;
  endTimer(label: string): number;
  measureMemory(): number;
  getMetrics(): PerformanceMetrics;
}

interface PerformanceMetrics {
  uploadTime: number;
  processingTime: number;
  memoryUsage: number;
  filesProcessed: number;
  bytesUploaded: number;
}

/**
 * Resource optimization options
 */
interface OptimizationOptions {
  enableWorkers?: boolean;
  maxConcurrentUploads?: number;
  chunkSize?: number;
  memoryLimit?: number;
  diskCacheEnabled?: boolean;
}

Install with Tessl CLI