UploadNotificationPanel

A notification-style panel for background uploads with collapse/expand and per-file progress.

A panel that manages uploads in the background. Collapses to a small pill showing "N uploads in progress" with a circular indicator, expands to reveal per-file progress bars with cancel buttons. Completed files auto-dismiss.

Design inspiration: Google Drive upload panel, macOS Finder copy dialog.

UploadNotificationPanel renders inline in the document flow at 320 px width — it does not fix-position itself. If you need a floating bottom-right panel, wrap it in a positioned container:

<div style={{ position: 'fixed', bottom: 16, right: 16, zIndex: 50 }}>
  <UploadNotificationPanel route="fileUploader" />
</div>

motion is an optional peerDependency. Without it, expand/collapse snaps. pnpm add motion for smooth height animations and AnimatePresence file row transitions.

Drop files here or click + to add

Google Drive — upload manager panel

Basic usage

import { useRef } from 'react';
import { UploadNotificationPanel, type UploadNotificationPanelHandle } from '@uploadkitdev/react';

export default function App() {
  const panelRef = useRef<UploadNotificationPanelHandle>(null);

  return (
    <>
      <button onClick={() => panelRef.current?.addFiles([/* File[] */])}>
        Trigger upload
      </button>
      <UploadNotificationPanel
        ref={panelRef}
        route="fileUploader"
        onUploadComplete={(results) => {
          console.log('Background uploads done:', results.length);
        }}
      />
    </>
  );
}

Props

Prop	Type	Default	Description
`route`	`string`	—	Required. Route name from your file router.
`accept`	`string[]`	—	Accepted MIME types (UX-only).
`maxSize`	`number`	—	Maximum file size in bytes (UX-only).
`maxFiles`	`number`	—	Maximum number of files per batch.
`metadata`	`Record<string, unknown>`	—	Metadata forwarded to the server.
`onUploadComplete`	`(results: UploadResult[]) => void`	—	Called after all files upload.
`onUploadError`	`(error: Error) => void`	—	Called on failure.
`className`	`string`	—	Additional CSS class(es) on the panel wrapper.

The component also exposes addFiles(files: File[]) via ref (UploadNotificationPanelHandle) so other components can programmatically enqueue uploads.

Accessibility

Panel has role="region" with aria-label
aria-live region announces upload count changes
Collapse/expand button is keyboard accessible
Respects prefers-reduced-motion

UploadNotificationPanel

Basic usage

Props

Accessibility

On this page