Uppy JavaScript File Uploader

The Dashboard plugin is a universal UI component for Uppy that provides:

• File Selection: Drag and drop, paste, or select from local disk/device.
• Remote/Webcam Support: UI for Webcam and remote sources like Google Drive and Dropbox (requires additional plugins).
• File Management: File previews, info display, and a metadata editor.
• Progress Tracking: Displays total progress and individual file progress.
• Control: Ability to pause, resume, or cancel uploads (functionality depends on the specific uploader plugin being used).

The @uppy/google-photos-picker plugin allows users to import photos directly from their Google Photos account using the Google Picker API. This integrates the Google Photos selection experience into the Uppy file upload workflow.

For detailed implementation guides and configuration options, refer to the official Uppy documentation.

Companion is a server integration for the Uppy file uploader. It facilitates server-to-server communication between your server and various file storage providers (e.g., Google Drive, Dropbox).

Important: Companion is not a destination for file uploads. To upload files, you should use a Tus server for resumable uploads or your own Apache/Nginx server for standard uploads.

GoldenRetriever is a persistence plugin for Uppy. Its primary purpose is to ensure that if a user's browser crashes or is closed during an upload process, the selected files and their metadata are not lost.

It achieves this by caching data in several browser storage mechanisms:

• Local Storage: Used for file metadata.
• Service Worker: Used for all blobs.
• IndexedDB: Used for small blobs.

When the user returns to the application, Uppy can use this cached data to restore the state and resume uploads seamlessly.

When using Uppy with AWS S3 and a Node.js backend, you can implement two different signing strategies:

1. Client-side signing (STS): The server provides temporary credentials via a GET /s3/sts endpoint. The browser then uses these credentials to sign S3 requests locally using SigV4.
2. Server-side signing (presigned URLs): The browser sends S3 operations to a POST /s3/presign endpoint. The server generates a presigned URL, which the browser then uses to perform the upload directly to S3.

The OneDrive plugin relies on a Companion instance to handle the heavy lifting.

Instead of the user's browser downloading files directly from Microsoft, Companion:

1. Handles authentication with Microsoft OneDrive.
2. Downloads files from OneDrive on the server side.
3. Uploads those files to your specified destination.

This architecture is particularly beneficial for users on mobile connections or limited bandwidth.

Uppy's XHRUpload plugin supports a bundle mode. In this mode, instead of firing off a separate HTTP request for every individual file, Uppy bundles all selected files into a single multipart/form-data request sent to the endpoint.

Key characteristics:

• Efficiency: Reduces the number of HTTP requests.
• Trade-off: Uploading may be slightly slower than individual requests, but it simplifies server-side handling by receiving all files in one stream.
• Server Requirement: The server must be capable of parsing a single multipart request containing multiple files (e.g., using multer in an Express.js environment).

// Conceptual usage of XHRUpload in bundle mode
new Uppy().use(XHRUpload, {
  endpoint: 'https://your-endpoint.com/upload',
  bundle: true,
});

The @uppy/google-drive plugin allows users to import files directly from their Google Drive accounts into Uppy.

It relies on a Companion instance to perform the heavy lifting:

1. Authentication: Companion handles the OAuth flow with Google.
2. File Transfer: Companion downloads the files from Google Drive and uploads them to your specified destination.

By offloading the file transfer to Companion, the user's device does not need to download the entire file before uploading it, significantly reducing bandwidth usage for the end-user.

Uppy has first-class support for plain JS/HTML, React, Svelte, Vue, and Angular.

For React, Svelte, and Vue, Uppy provides three ways to build user interfaces:

1. Pre-composed, plug-and-play components: Primarily the <Dashboard /> component. This is easy to use but offers limited UI customization.
2. Headless components: Smaller components that allow you to override styles or compose them with your own custom UI elements.
3. Hooks: Provides the underlying logic to attach to your own custom components, offering total control over the UI.

Companion uses WebSockets to transfer progress events to the client during file transfers (specifically during Tus uploads).

How it works

1. When a request is made to /:provider/get to start a transfer, Companion generates a unique token.
2. This token is sent back to the client in the response.
3. The client connects to a WebSocket endpoint using that token: wss://your-server/{token}.
4. Companion emits events using the token as the event name: emitter.emit('{token}', progressData).
5. The client receives these progressData events to update the UI.

This mechanism is considered secure because the token is short-lived (only valid during the specific transfer) and only transmits non-sensitive progress information.