build69
Sign inGet API key
build69  /  Components  /  Media & Files  /  UploadTray

UploadTray

v1.0.8Updated 27 Aug 2026

Gmail-style floating upload manager. Fixed corner positioning, minimisable header (thin progress visible while minimised), persistent across pages, autoCloseOnComplete, notifyOnComplete (sonner toast), four corners, conf

View source← Back to catalog

Preview

Live · 9 stories
DefaultOpen ↗
▸Why this is recommendedformuploadtrayfloating+5

The default, out-of-the-box UploadTray.

Recommended for+14
  • ✓Floating upload tray that shows progress for many files
  • ✓Minimizable upload manager persistent across page navigation
  • ✓Gmail-style background uploads tray
  • ✓Large-batch bulk imports with many files
  • ✓Long-running uploads outside the current page
Tags+6
formuploadtrayfloatingminimizegmailcorneroverlaydefault
Features+4
  • Fixed corner positioning (4 corners)
  • Minimisable header with thin progress visible while minimised
  • Persistent across page navigation
  • autoCloseOnComplete after all uploads finish
  • notifyOnComplete via sonner toast
  • Configurable width / offset / maxBodyHeight
  • Per-file pause / resume / retry / cancel / remove / open actions
  • Tray-level clear-completed action
  • Custom title renderer (UploadTrayStats)
  • i18n: labels prop overrides every built-in string (header titles, row status text, tooltips/aria-labels, empty state, completion toasts); numbers, byte sizes and ETA durations format through LocaleProvider
Not recommended for−2
  • ✕Inline single upload (use FileUpload)
  • ✕Embedded progress inside a form (use UploadProgress)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "UploadTray" })

Usage

import { UploadTray } from '@/components/media/upload-tray';

<UploadTray
  files={files}
  onFileAction={dispatch}
  position="bottom-right"
  autoCloseOnComplete
  notifyOnComplete
/>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
files

File list shared with UploadProgress

UploadProgressFile[]yes
onFileAction

Per-file action dispatcher

(id, action) => void—
onClearCompleted

Clear all completed handler

function—
open

Controlled open state

boolean—
minimized

Controlled minimised state

boolean—
position

Corner position

'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'—
offset

Distance from edge (default 24)

number—
width

Tray width (default 360)

number—
maxBodyHeight

Body max height (default 360)

number—
autoCloseOnComplete

Close when all done

boolean—
notifyOnComplete

Sonner toast on completion

boolean—
titleRenderer

Custom header title

(stats) => ReactNode—
labels

Override any built-in UI string — header titles, row status text, action tooltips/aria-labels, empty state, completion toasts (i18n). Merged over DEFAULT_UPLOAD_TRAY_LABELS; {token} templates for parameterized strings. Numbers, byte sizes and ETA durations follow LocaleProvider.

Partial<UploadTrayLabels>—

Related

Platform docsAll componentsSource files