CoreUpload v5 . ASP.NET Core 8+
Direct-to-S3 / Azure tus 1.0 resume IndexedDB Golden Retriever 30 locales Webcam & screen capture
Contact

Don't upload the same file twice across browser 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. CoreUpload'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.

What you should see: open this page in two tabs and act in one. The other tab mirrors the queue and progress over a BroadcastChannel, and the same file is not uploaded twice.
Drag & drop files here, or paste from clipboard
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

CoreUpload.create('#uploader', {
 uploadUrl: '/api/upload/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).

Pair with content-addressable storage

If your backend already deduplicates by hash (S3 with object key = hash, or a CAS like git-LFS), cross-tab coordination is the client-side complement: it stops the duplicate request from ever leaving the browser, saving the network + server round-trip.

CoreUpload.create('#uploader', {
 computeHash: true,
 hashAlgorithm: 'sha256',
 crossTab: true
});

Browser support

  • BroadcastChannel: all modern browsers (Chrome 54+, Firefox 38+, Safari 15.4+, Edge 79+). Service Workers + Web Workers can post to the same channel.
  • 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 (which is the realistic case).

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