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

UI Plugins

Name: tessl/npm-uppy
Author: tessl

UI plugins provide user interface components for file selection, display, and interaction. These plugins extend UIPlugin and render visual components that users interact with during the upload process.

Capabilities

Dashboard

Comprehensive dashboard UI providing the complete Uppy experience with file management, previews, and upload controls.

/**
 * Main dashboard UI plugin with full feature set
 */
class Dashboard<M extends Meta = {}, B extends Body = {}> extends UIPlugin<DashboardOptions<M, B>> {
  constructor(uppy: Uppy<M, B>, options?: DashboardOptions<M, B>);
  
  // Modal operations
  openModal(): Promise<void>;
  closeModal(options?: { manualClose?: boolean }): void | Promise<void>;
  isModalOpen(): boolean;
  
  // File operations
  addFiles(files: File[]): void;
  openFileEditor(file: UppyFile<M, B>): void;
  closeFileEditor(): void;
  saveFileEditor(): void;
  
  // Panel management
  showPanel(id: string): void;
  hideAllPanels(): void;
  toggleFileCard(show: boolean, fileID: string): void;
  
  // Plugin integration
  addTarget(plugin: BasePlugin<any>): HTMLElement | null;
  removeTarget(plugin: BasePlugin<any>): void;
}

interface DashboardOptions<M extends Meta = {}, B extends Body = {}> {
  target?: string | Element;
  inline?: boolean;
  width?: number | string;
  height?: number | string;
  trigger?: string | Element;
  closeAfterFinish?: boolean;
  theme?: 'light' | 'dark' | 'auto';
  note?: string;
  proudlyDisplayPoweredByUppy?: boolean;
  metaFields?: MetaField[] | ((file: UppyFile<M, B>) => MetaField[]);
  showProgressDetails?: boolean;
  showRemoveButtonAfterComplete?: boolean;
  browserBackButtonClose?: boolean;
  doneButtonHandler?: () => void;
}

Usage Example:

import { Uppy, Dashboard } from "uppy";

const uppy = new Uppy()
  .use(Dashboard, {
    target: '#uppy-dashboard',
    inline: true,
    width: '100%',
    height: 400,
    theme: 'auto',
    showProgressDetails: true,
    metaFields: [
      { id: 'name', name: 'Name', placeholder: 'File name' },
      { id: 'caption', name: 'Caption', placeholder: 'Describe your file' }
    ]
  });

File Input Components

Simple file input components for basic file selection without advanced UI features.

/**
 * Traditional file input button
 */
class FileInput<M extends Meta = {}, B extends Body = {}> extends UIPlugin<FileInputOptions> {
  constructor(uppy: Uppy<M, B>, options?: FileInputOptions);
}

interface FileInputOptions {
  target?: string | Element;
  pretty?: boolean;
  inputName?: string;
  locale?: Locale;
}

/**
 * Drag and drop area for file selection
 */
class DragDrop<M extends Meta = {}, B extends Body = {}> extends UIPlugin<DragDropOptions> {
  constructor(uppy: Uppy<M, B>, options?: DragDropOptions);
}

interface DragDropOptions {
  target?: string | Element;
  width?: number | string;
  height?: number | string;
  note?: string;
  locale?: Locale;
}

/**
 * Drop target overlay for drag and drop anywhere on page
 */
class DropTarget<M extends Meta = {}, B extends Body = {}> extends UIPlugin<DropTargetOptions> {
  constructor(uppy: Uppy<M, B>, options?: DropTargetOptions);
}

interface DropTargetOptions {
  target?: string | Element;
  onDragOver?: (event: DragEvent) => void;
  onDragLeave?: (event: DragEvent) => void;
  onDrop?: (event: DragEvent) => void;
}

Usage Examples:

// Simple file input
uppy.use(FileInput, {
  target: '#file-input',
  pretty: true,
  inputName: 'files'
});

// Drag and drop area
uppy.use(DragDrop, {
  target: '#drag-drop-area',
  width: '100%',
  height: '200px',
  note: 'Drop files here or click to browse'
});

// Full-page drop target
uppy.use(DropTarget, {
  target: document.body,
  onDragOver: (event) => {
    console.log('File dragged over page');
  }
});

Progress Display Components

Components for displaying upload progress and status information.

/**
 * Progress bar showing upload progress
 */
class ProgressBar<M extends Meta = {}, B extends Body = {}> extends UIPlugin<ProgressBarOptions> {
  constructor(uppy: Uppy<M, B>, options?: ProgressBarOptions);
}

interface ProgressBarOptions {
  target?: string | Element;
  fixed?: boolean;
  hideAfterFinish?: boolean;
  locale?: Locale;
}

/**
 * Status bar with detailed upload information
 */
class StatusBar<M extends Meta = {}, B extends Body = {}> extends UIPlugin<StatusBarOptions<M, B>> {
  constructor(uppy: Uppy<M, B>, options?: StatusBarOptions<M, B>);
}

interface StatusBarOptions<M extends Meta = {}, B extends Body = {}> {
  target?: string | Element;
  hideUploadButton?: boolean;
  hideRetryButton?: boolean;
  hidePauseResumeButton?: boolean;
  hideCancelButton?: boolean;
  showProgressDetails?: boolean;
  hideAfterFinish?: boolean;
  doneButtonHandler?: () => void;
  locale?: Locale;
}

/**
 * Information and notification display
 */
class Informer<M extends Meta = {}, B extends Body = {}> extends UIPlugin<InformerOptions> {
  constructor(uppy: Uppy<M, B>, options?: InformerOptions);
}

interface InformerOptions {
  target?: string | Element;
  replaceTargetContent?: boolean;
  locale?: Locale;
}

Usage Examples:

// Progress bar at top of page
uppy.use(ProgressBar, {
  target: 'body',
  fixed: true,
  hideAfterFinish: true
});

// Detailed status bar
uppy.use(StatusBar, {
  target: '#status-bar',
  showProgressDetails: true,
  hideUploadButton: false,
  doneButtonHandler: () => {
    console.log('Upload completed!');
    window.location.href = '/success';
  }
});

// Notification informer
uppy.use(Informer, {
  target: '#notifications',
  replaceTargetContent: false
});

UI Plugin Events

// Dashboard-specific events
interface DashboardEvents<M extends Meta = {}, B extends Body = {}> {
  'dashboard:modal-open': () => void;
  'dashboard:modal-closed': () => void;
  'dashboard:show-panel': (id: string) => void;
  'dashboard:close-panel': (id: string | undefined) => void;
  'dashboard:file-edit-start': (file?: UppyFile<M, B>) => void;
  'dashboard:file-edit-complete': (file?: UppyFile<M, B>) => void;
}

// Common UI events
interface UIPluginEvents {
  'drag-over': (event: DragEvent) => void;
  'drag-leave': (event: DragEvent) => void;
  'file-input-change': (event: Event) => void;
}

Common UI Options

/**
 * Common options available across UI plugins
 */
interface CommonUIOptions {
  target?: string | Element;
  locale?: Locale;
  replaceTargetContent?: boolean;
}

/**
 * Styling options for UI plugins
 */
interface UIStyleOptions {
  width?: number | string;
  height?: number | string;
  theme?: 'light' | 'dark' | 'auto';
}

/**
 * Metadata field configuration for file editing
 */
interface MetaField {
  id: string;
  name: string;
  placeholder?: string;
  render?: (field: FieldRenderOptions, h: ComponentRender) => ComponentChild;
}

interface FieldRenderOptions {
  value: any;
  onChange: (value: any) => void;
  fieldCSSClasses: string[];
  required: boolean;
}

Install with Tessl CLI