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

File Sources

Name: tessl/npm-uppy
Author: tessl

File source plugins enable users to capture or select files from various local sources including cameras, microphones, screen recording, and file processing capabilities.

Capabilities

Media Capture

Plugins for capturing media directly from user devices.

/**
 * Webcam capture for photos and videos
 */
class Webcam<M extends Meta = {}, B extends Body = {}> extends UIPlugin<WebcamOptions> {
  constructor(uppy: Uppy<M, B>, options?: WebcamOptions);
}

interface WebcamOptions {
  target?: string | Element;
  countdown?: boolean | number;
  modes?: Array<'video-audio' | 'video-only' | 'audio-only' | 'picture'>;
  mirror?: boolean;
  facingMode?: 'user' | 'environment';
  videoConstraints?: MediaTrackConstraints;
  showVideoSourceDropdown?: boolean;
  preferredVideoMimeType?: string;
  title?: string;
  locale?: Locale;
}

/**
 * Audio recording from microphone
 */
class Audio<M extends Meta = {}, B extends Body = {}> extends UIPlugin<AudioOptions> {
  constructor(uppy: Uppy<M, B>, options?: AudioOptions);
}

interface AudioOptions {
  target?: string | Element;
  showAudioSourceDropdown?: boolean;
  audioConstraints?: MediaTrackConstraints;
  audioContext?: AudioContext;
  preferredAudioMimeType?: string;
  title?: string;
  locale?: Locale;
}

/**
 * Screen capture and recording
 */
class ScreenCapture<M extends Meta = {}, B extends Body = {}> extends UIPlugin<ScreenCaptureOptions> {
  constructor(uppy: Uppy<M, B>, options?: ScreenCaptureOptions);
}

interface ScreenCaptureOptions {
  target?: string | Element;
  displayMediaConstraints?: DisplayMediaStreamConstraints;
  userMediaConstraints?: MediaStreamConstraints;
  preferredVideoMimeType?: string;
  title?: string;
  locale?: Locale;
}

Usage Examples:

import { Uppy, Webcam, Audio, ScreenCapture } from "uppy";

const uppy = new Uppy()
  // Webcam with video and photo modes
  .use(Webcam, {
    countdown: 3,
    modes: ['video-audio', 'picture'],
    mirror: true,
    facingMode: 'user',
    preferredVideoMimeType: 'video/webm'
  })
  
  // Audio recording with device selection
  .use(Audio, {
    showAudioSourceDropdown: true,
    preferredAudioMimeType: 'audio/webm'
  })
  
  // Screen recording
  .use(ScreenCapture, {
    preferredVideoMimeType: 'video/webm',
    displayMediaConstraints: {
      video: { mediaSource: 'screen' }
    }
  });

File Processing

Plugins for editing and processing files before upload.

/**
 * Image editor with cropping and filtering
 */
class ImageEditor<M extends Meta = {}, B extends Body = {}> extends UIPlugin<ImageEditorOptions> {
  constructor(uppy: Uppy<M, B>, options?: ImageEditorOptions);
}

interface ImageEditorOptions {
  target?: string | Element;
  quality?: number;
  cropperOptions?: {
    viewMode?: number;
    background?: boolean;
    autoCropArea?: number;
    responsive?: boolean;
  };
  actions?: {
    revert?: boolean;
    rotate?: boolean;
    granularRotate?: boolean;
    flip?: boolean;
    zoomIn?: boolean;
    zoomOut?: boolean;
    cropSquare?: boolean;
    cropWidescreen?: boolean;
    cropWidescreenVertical?: boolean;
  };
  locale?: Locale;
}

/**
 * Image compression and optimization
 */
class Compressor<M extends Meta = {}, B extends Body = {}> extends BasePlugin<CompressorOptions> {
  constructor(uppy: Uppy<M, B>, options?: CompressorOptions);
}

interface CompressorOptions {
  quality?: number;
  limit?: number;
  mimeType?: string;
  convertTypes?: string | string[];
  convertSize?: number;
  locale?: Locale;
}

Usage Examples:

// Image editor with cropping tools
uppy.use(ImageEditor, {
  quality: 0.8,
  cropperOptions: {
    viewMode: 1,
    background: false,
    autoCropArea: 1,
    responsive: true
  },
  actions: {
    revert: true,
    rotate: true,
    granularRotate: true,
    flip: true,
    zoomIn: true,
    zoomOut: true,
    cropSquare: true,
    cropWidescreen: true
  }
});

// Image compression for file size optimization
uppy.use(Compressor, {
  quality: 0.6,
  limit: 1000, // 1MB limit
  convertTypes: ['image/webp', 'image/avif'],
  convertSize: 1000000 // Convert files larger than 1MB
});

File Source Events

// Media capture events
interface MediaCaptureEvents {
  'webcam:start': () => void;
  'webcam:stop': () => void;
  'webcam:error': (error: Error) => void;
  'audio:start': () => void;
  'audio:stop': () => void;
  'screen-capture:start': () => void;
  'screen-capture:stop': () => void;
}

// File processing events
interface FileProcessingEvents<M extends Meta = {}, B extends Body = {}> {
  'image-editor:open': (file: UppyFile<M, B>) => void;
  'image-editor:complete': (file: UppyFile<M, B>) => void;
  'image-editor:cancel': (file: UppyFile<M, B>) => void;
  'compressor:start': (file: UppyFile<M, B>) => void;
  'compressor:complete': (file: UppyFile<M, B>) => void;
}

Media Constraints

/**
 * Media stream constraints for device capture
 */
interface MediaConstraints {
  video?: boolean | MediaTrackConstraints;
  audio?: boolean | MediaTrackConstraints;
}

interface MediaTrackConstraints {
  aspectRatio?: number | ConstrainDouble;
  autoGainControl?: boolean | ConstrainBoolean;
  channelCount?: number | ConstrainULong;
  deviceId?: string | string[] | ConstrainDOMString;
  echoCancellation?: boolean | ConstrainBoolean;
  facingMode?: string | string[] | ConstrainDOMString;
  frameRate?: number | ConstrainDouble;
  groupId?: string | string[] | ConstrainDOMString;
  height?: number | ConstrainULong;
  noiseSuppression?: boolean | ConstrainBoolean;
  sampleRate?: number | ConstrainULong;
  sampleSize?: number | ConstrainULong;
  width?: number | ConstrainULong;
}

interface DisplayMediaStreamConstraints {
  video?: boolean | MediaTrackConstraints & {
    cursor?: 'always' | 'motion' | 'never';
    displaySurface?: 'application' | 'browser' | 'monitor' | 'window';
    logicalSurface?: boolean;
    mediaSource?: 'screen' | 'window' | 'application';
  };
  audio?: boolean | MediaTrackConstraints;
}

Install with Tessl CLI