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

Cloud Providers

Name: tessl/npm-uppy
Author: tessl

Cloud provider plugins enable users to import files from popular cloud storage services and social media platforms. These plugins integrate with remote APIs through Uppy Companion server.

Capabilities

Cloud Storage Services

Plugins for importing files from major cloud storage providers.

/**
 * Google Drive integration
 */
class GoogleDrive<M extends Meta = {}, B extends Body = {}> extends BasePlugin<GoogleDriveOptions> {
  constructor(uppy: Uppy<M, B>, options?: GoogleDriveOptions);
}

interface GoogleDriveOptions {
  target?: string | Element;
  companionUrl: string;
  companionHeaders?: { [key: string]: string };
  companionAllowedHosts?: string | RegExp | (string | RegExp)[];
  companionCookiesRule?: string;
  title?: string;
  storage?: CompanionClientStorage;
  locale?: Locale;
}

/**
 * Google Drive Picker integration using official picker API
 */
class GoogleDrivePicker<M extends Meta = {}, B extends Body = {}> extends UIPlugin<GoogleDrivePickerOptions> {
  constructor(uppy: Uppy<M, B>, options?: GoogleDrivePickerOptions);
}

interface GoogleDrivePickerOptions {
  target?: string | Element;
  apiKey: string;
  clientId: string;
  title?: string;
  locale?: Locale;
}

/**
 * Dropbox integration
 */
class Dropbox<M extends Meta = {}, B extends Body = {}> extends BasePlugin<DropboxOptions> {
  constructor(uppy: Uppy<M, B>, options?: DropboxOptions);
}

interface DropboxOptions {
  target?: string | Element;
  companionUrl: string;
  companionHeaders?: { [key: string]: string };
  companionAllowedHosts?: string | RegExp | (string | RegExp)[];
  companionCookiesRule?: string;
  title?: string;
  storage?: CompanionClientStorage;
  locale?: Locale;
}

/**
 * Box.com integration
 */
class Box<M extends Meta = {}, B extends Body = {}> extends BasePlugin<BoxOptions> {
  constructor(uppy: Uppy<M, B>, options?: BoxOptions);
}

interface BoxOptions {
  target?: string | Element;
  companionUrl: string;
  companionHeaders?: { [key: string]: string };
  companionAllowedHosts?: string | RegExp | (string | RegExp)[];
  companionCookiesRule?: string;
  title?: string;
  storage?: CompanionClientStorage;
  locale?: Locale;
}

/**
 * Microsoft OneDrive integration
 */
class OneDrive<M extends Meta = {}, B extends Body = {}> extends BasePlugin<OneDriveOptions> {
  constructor(uppy: Uppy<M, B>, options?: OneDriveOptions);
}

interface OneDriveOptions {
  target?: string | Element;
  companionUrl: string;
  companionHeaders?: { [key: string]: string };
  companionAllowedHosts?: string | RegExp | (string | RegExp)[];
  companionCookiesRule?: string;
  title?: string;
  storage?: CompanionClientStorage;
  locale?: Locale;
}

Usage Examples:

import { Uppy, GoogleDrive, Dropbox, Box, OneDrive } from "uppy";

const uppy = new Uppy()
  // Google Drive with companion server
  .use(GoogleDrive, {
    companionUrl: 'https://companion.uppy.io',
    companionHeaders: {
      'Authorization': 'Bearer ' + token
    }
  })
  
  // Dropbox integration
  .use(Dropbox, {
    companionUrl: 'https://companion.uppy.io'
  })
  
  // Box.com integration
  .use(Box, {
    companionUrl: 'https://companion.uppy.io'
  })
  
  // OneDrive integration
  .use(OneDrive, {
    companionUrl: 'https://companion.uppy.io'
  });

// Google Drive Picker (alternative to companion-based)
uppy.use(GoogleDrivePicker, {
  apiKey: 'YOUR_GOOGLE_API_KEY',
  clientId: 'YOUR_GOOGLE_CLIENT_ID'
});

Social Media Services

Plugins for importing media from social media platforms.

/**
 * Instagram integration
 */
class Instagram<M extends Meta = {}, B extends Body = {}> extends BasePlugin<InstagramOptions> {
  constructor(uppy: Uppy<M, B>, options?: InstagramOptions);
}

interface InstagramOptions {
  target?: string | Element;
  companionUrl: string;
  companionHeaders?: { [key: string]: string };
  companionAllowedHosts?: string | RegExp | (string | RegExp)[];
  companionCookiesRule?: string;
  title?: string;
  storage?: CompanionClientStorage;
  locale?: Locale;
}

/**
 * Facebook integration
 */
class Facebook<M extends Meta = {}, B extends Body = {}> extends BasePlugin<FacebookOptions> {
  constructor(uppy: Uppy<M, B>, options?: FacebookOptions);
}

interface FacebookOptions {
  target?: string | Element;
  companionUrl: string;
  companionHeaders?: { [key: string]: string };
  companionAllowedHosts?: string | RegExp | (string | RegExp)[];
  companionCookiesRule?: string;
  title?: string;
  storage?: CompanionClientStorage;
  locale?: Locale;
}

/**
 * Unsplash photo library integration
 */
class Unsplash<M extends Meta = {}, B extends Body = {}> extends BasePlugin<UnsplashOptions> {
  constructor(uppy: Uppy<M, B>, options?: UnsplashOptions);
}

interface UnsplashOptions {
  target?: string | Element;
  companionUrl: string;
  companionHeaders?: { [key: string]: string };
  companionAllowedHosts?: string | RegExp | (string | RegExp)[];
  companionCookiesRule?: string;
  title?: string;
  storage?: CompanionClientStorage;
  locale?: Locale;
}

Usage Examples:

// Social media integrations
uppy
  .use(Instagram, {
    companionUrl: 'https://companion.uppy.io'
  })
  .use(Facebook, {
    companionUrl: 'https://companion.uppy.io'
  })
  .use(Unsplash, {
    companionUrl: 'https://companion.uppy.io'
  });

URL Import and Video Services

Plugins for importing files from URLs and video platforms.

/**
 * Import files from URLs
 */
class Url<M extends Meta = {}, B extends Body = {}> extends BasePlugin<UrlOptions> {
  constructor(uppy: Uppy<M, B>, options?: UrlOptions);
}

interface UrlOptions {
  target?: string | Element;
  companionUrl: string;
  companionHeaders?: { [key: string]: string };
  companionAllowedHosts?: string | RegExp | (string | RegExp)[];
  companionCookiesRule?: string;
  title?: string;
  storage?: CompanionClientStorage;
  locale?: Locale;
}

/**
 * Zoom integration for recordings
 */
class Zoom<M extends Meta = {}, B extends Body = {}> extends BasePlugin<ZoomOptions> {
  constructor(uppy: Uppy<M, B>, options?: ZoomOptions);
}

interface ZoomOptions {
  target?: string | Element;
  companionUrl: string;
  companionHeaders?: { [key: string]: string };
  companionAllowedHosts?: string | RegExp | (string | RegExp)[];
  companionCookiesRule?: string;
  title?: string;
  storage?: CompanionClientStorage;
  locale?: Locale;
}

Usage Examples:

// URL import
uppy.use(Url, {
  companionUrl: 'https://companion.uppy.io'
});

// Zoom recordings
uppy.use(Zoom, {
  companionUrl: 'https://companion.uppy.io'
});

Remote Sources Container

Unified container plugin for multiple remote sources.

/**
 * Container plugin that combines multiple remote sources
 */
class RemoteSources<M extends Meta = {}, B extends Body = {}> extends UIPlugin<RemoteSourcesOptions> {
  constructor(uppy: Uppy<M, B>, options?: RemoteSourcesOptions);
}

interface RemoteSourcesOptions {
  companionUrl: string;
  companionHeaders?: { [key: string]: string };
  companionAllowedHosts?: string | RegExp | (string | RegExp)[];
  companionCookiesRule?: string;
  sources: string[]; // Array of provider names: ['GoogleDrive', 'Dropbox', 'Instagram', etc.]
  storage?: CompanionClientStorage;
  locale?: Locale;
}

Usage Example:

// Combined remote sources
uppy.use(RemoteSources, {
  companionUrl: 'https://companion.uppy.io',
  sources: [
    'GoogleDrive',
    'Dropbox', 
    'Box',
    'OneDrive',
    'Instagram',
    'Facebook',
    'Unsplash',
    'Url'
  ]
});

Companion Integration

/**
 * Companion client configuration
 */
interface CompanionClientOptions {
  companionUrl: string;
  companionHeaders?: { [key: string]: string };
  companionAllowedHosts?: string | RegExp | (string | RegExp)[];
  companionCookiesRule?: 'same-origin' | 'include' | 'omit';
  storage?: CompanionClientStorage;
}

interface CompanionClientStorage {
  getItem(key: string): string | null;
  setItem(key: string, value: string): void;
  removeItem(key: string): void;
}

/**
 * Provider authentication state
 */
interface ProviderAuthState {
  authenticated: boolean;
  token?: string;
  username?: string;
  email?: string;
}

Cloud Provider Events

// Authentication events
interface ProviderAuthEvents {
  'provider:auth': (provider: string, authData: ProviderAuthState) => void;
  'provider:logout': (provider: string) => void;
  'provider:error': (provider: string, error: Error) => void;
}

// File selection events
interface ProviderFileEvents<M extends Meta = {}, B extends Body = {}> {
  'provider:file-selected': (provider: string, file: RemoteFile) => void;
  'provider:folder-selected': (provider: string, folder: RemoteFolder) => void;
}

Remote File Types

interface RemoteFile {
  id: string;
  name: string;
  mimeType: string;
  size: number;
  modifiedDate: string;
  requestPath: string;
  thumbnail?: string;
  isFolder: boolean;
}

interface RemoteFolder {
  id: string;
  name: string;
  requestPath: string;
  items: (RemoteFile | RemoteFolder)[];
}

Install with Tessl CLI