MultipleUpload JavaScript upload component
Works with any backend npm install Zero dependencies
Contact

Don't upload the same file twice when the page is open in multiple tabs

A common foot-gun: the user has the upload page open in two tabs (cmd-clicked a link, or navigated and didn't close the old one). They drag the same file into both. Without coordination the server gets two parallel uploads, two database rows, two thumbnails, two billable events. MultipleUpload's crossTab option uses BroadcastChannel to lock each in-flight file by content hash (preferred) or name+size+lastModified (fallback) so only one tab actually transfers.

Try it:
  1. Open this demo in two tabs.
  2. Pick the same file in tab 1, hit upload.
  3. Pick the same file in tab 2 - it appears in the queue but immediately fails with cross_tab_locked instead of starting a duplicate transfer.
  4. Cancel in tab 1; tab 2 succeeds on its next retry.
Configuration
new MultipleUpload('#uploader', {
 uploadUrl: '/api/upload',
 crossTab: true,
 crossTabChannel: 'my-app-uploads' // optional namespace
});
Lock key strategy
  • Preferred: the file's content hash (when computeHash: true). Identical bytes -> identical key -> only one tab proceeds even when filenames differ.
  • Fallback: name + size + lastModified. Catches the obvious case (same drag-drop in both tabs) without requiring a hash pass.
  • Locks are held for the life of the upload - released on success, cancel, fatal failure, and tab unload (pagehide + beforeunload).
How the broadcast works
  • Each tab opens a BroadcastChannel with the configured name (default multipleupload-coordination).
  • On startup it sends a probe message - other tabs reply with their current locks so the new tab is in sync immediately.
  • Lock messages: { type: 'lock', key, tabId }. Unlock: { type: 'unlock', key, tabId }.
  • Every tab maintains a local mirror of the broadcast state - no leader-election protocol, no dependencies.
Pair with content-addressable storage
new MultipleUpload('#uploader', {
 computeHash: true,
 hashAlgorithm: 'sha256',
 crossTab: true
});
Browser support
  • BroadcastChannel: all modern browsers (Chrome 54+, Firefox 38+, Safari 15.4+, Edge 79+).
  • Older browsers: the option becomes a no-op - uploads work normally, no errors thrown.
  • Cross-origin tabs: BroadcastChannel is same-origin only by spec, so this protects against same-origin duplicates (the realistic case).

Uppy, FilePond, Dropzone, and FineUploader all leave duplicate-tab handling to the application layer. MultipleUpload is the first major upload component to bake it into the core option set.