DOCSEARCHbyAlgolia
Submit Docs

Uppy Documentation

website·Indexed 37 days ago

https://uppy.io

An open source, modular JavaScript file uploader that integrates with any application. It features a comprehensive API and a wide array of plugins for sources (Google Drive, Dropbox, Box, OneDrive, Facebook, WebDAV, URL), destinations (AWS S3), and UI components (Dashboard, Drag & Drop, Progress Bar). It includes framework integrations for React, Angular, and Next.js, as well as Companion, an open source server-to-server orchestrator for remote file streaming.

Tokens
54.8K
Snippets
279
Records
387
Agent score
73%

What's inside Uppy

  1. Overview of @uppy/drop-target plugin

    The @uppy/drop-target plugin allows users to drag and drop files onto any element on a page (such as document.body). It is designed for cases where you want to implement drag-and-drop within your own custom UI rather than using the standard Uppy Dashboard. It can be used independently or in conjunction with the Uppy Dashboard or other Drag & Drop plugins.

  2. Overview of @uppy/form plugin

    The @uppy/form plugin allows Uppy to integrate with an existing HTML <form> element. It provides three primary capabilities:

    1. Metadata Extraction: Extracts input values from the form and attaches them to the files being uploaded (added to uppy.state.meta and individual file meta).
    2. Result Injection: Appends the upload result (e.g., file URLs) back into the form as a hidden input field, allowing the form to be POSTed to a backend with the upload results.
    3. Submission Workflow: Can be configured to trigger the Uppy upload when the form is submitted, or automatically submit the form after Uppy finishes uploading.

  3. Overview of @uppy/golden-retriever

    The @uppy/golden-retriever plugin saves selected files and Uppy state in the browser cache to prevent data loss if a browser crashes or a user accidentally closes a tab. It uses three storage mechanisms:

    • IndexedDB: Stores file metadata, Uppy state, and small files (up to 10MiB per file by default).
    • LocalStorage: Fallback for metadata and state if window.indexedDB is unavailable.
    • Service Worker (Optional): Stores references to large files. This storage is temporary and does not persist across browser restarts, but handles accidental refreshes or closed tabs.

    If a file cannot be restored, it is marked as a "ghost" in the Dashboard UI, and the user is prompted to re-select the file.

  4. Overview of @uppy/screen-capture plugin

    The @uppy/screen-capture plugin enables users to record their screen or a specific application and save the result as a video file. It requires a desktop browser that supports the getDisplayMedia API. If the API is not supported, the plugin will not be installed. Note that for Chromium-based browsers, the site must be served over HTTPS (except for localhost).

  5. Overview of @uppy/status-bar plugin

    The @uppy/status-bar plugin provides a user interface to display upload progress, upload speed, estimated time remaining, and pre/post-processing information. It also allows users to control uploads via pause, resume, and cancel actions. While it is included by default in the Dashboard plugin, it can be used as a standalone plugin, though it may require custom CSS for non-Dashboard layouts.

  6. Overview of @uppy/tus for resumable uploads

    @uppy/tus is a plugin that brings resumable file uploading to Uppy by wrapping the tus-js-client. It implements the Tus open protocol, allowing uploads (even very large ones) to continue after a connection loss or tab closure rather than starting over. It requires a compatible Tus server implementation to function.

  7. Overview of @uppy/image-generator plugin

    The @uppy/image-generator plugin allows users to generate images from text prompts using Transloadit’s /image/generate Robot. Instead of uploading existing files, users enter a prompt, and Uppy manages the process of requesting signed parameters from your backend, triggering the AI generation on Transloadit, and allowing users to select the resulting images to add to their upload.

  8. Overview of @uppy/audio plugin

    The @uppy/audio plugin enables users to record audio using a built-in or external microphone (or any other audio device) on both desktop and mobile platforms. The user interface provides a real-time sound wavelength visualization during recording.

  9. Overview of Uppy and Transloadit Integration

    Uppy is an open-source browser uploader that handles file selection, UI, and upload orchestration. Transloadit is a managed processing backend that receives files and executes processing instructions defined in a Template. The @uppy/transloadit plugin acts as the bridge, creating Assemblies and managing resumable uploads.

    Security Warning: The Transloadit Auth Secret must never be included in browser code. Use a server-side implementation to sign Assembly options and return them to the client.

  10. Overview of Uppy Companion

    Companion is a server-to-server orchestrator that simplifies authentication and file streaming from remote sources (e.g., Google Drive, Dropbox, Box, Facebook, OneDrive, Unsplash, Zoom) to a destination server. It streams files directly from the source to the destination (such as a Tus server, AWS S3 bucket, or any server supporting PUT, POST, or Multipart uploads) without storing the files on the Companion server. This prevents users from consuming their own data plans when uploading large remote files and removes the need for developers to implement OAuth manually for every provider.

  11. Overview of @uppy/compressor

    The @uppy/compressor plugin optimizes images (JPEG, PNG, and any other format supported by the client’s browser) before they are uploaded. It uses the Compressor.js library to reduce file sizes by up to 60%, which is particularly beneficial for mobile users to save data and speed up uploads.

  12. Migrate from Robodog to Uppy plugins

    Robodog is deprecated. To achieve the same functionality using Uppy's modular plugin system, use @uppy/remote-sources along with specific source plugins (like Webcam, ScreenCapture, etc.).
    import Uppy from '@uppy/core';
import Dashboard from '@uppy/dashboard';
import RemoteSources from '@uppy/remote-sources';
import Webcam from '@uppy/webcam';
import ScreenCapture from '@uppy/screen-capture';
import GoldenRetriever from '@uppy/golden-retriever';
import ImageEditor from '@uppy/image-editor';
import Audio from '@uppy/audio';
import Transloadit, {
	COMPANION_URL,
	COMPANION_ALLOWED_HOSTS,
} from '@uppy/transloadit';

import '@uppy/core/css/style.css';
import '@uppy/dashboard/css/style.css';
import '@uppy/audio/css/style.css';
import '@uppy/screen-capture/css/style.css';
import '@uppy/image-editor/css/style.css';

new Uppy()
	.use(Dashboard, {
		inline: true,
		target: '#app',
		showProgressDetails: true,
		proudlyDisplayPoweredByUppy: true,
	})
	.use(RemoteSources, {
		companionUrl: COMPANION_URL,
		companionAllowedHosts: COMPANION_ALLOWED_HOSTS,
	})
	.use(Webcam, {
		showVideoSourceDropdown: true,
		showRecordingLength: true,
	})
	.use(Audio, {
		showRecordingLength: true,
	})
	.use(ScreenCapture)
	.use(ImageEditor)
	.use(Transloadit, {
		service: 'https://api2.transloadit.com',
		async getAssemblyOptions(file) {
			const response = await fetch('/some-endpoint');
			return response.json();
		},
	});