Photonix UI - React Components, Templates & Figma Design System

UploadQueueModal

A floating modal docked in the bottom-right corner of the screen that tracks ongoing file uploads. Mimics the behavior of Google Drive's upload progress widget with minimize/expand transitions.

Preview

Usage

import { UploadQueueModal, type UploadQueueItem } from '@photonix/ultimate';
import { useState } from 'react';

const [open, setOpen] = useState(false);
const [files, setFiles] = useState<UploadQueueItem[]>([
  { id: '1', name: 'report.pdf', size: 1024 * 1024, status: 'success', progress: 100 }
]);

return (
  <>
    <Button onClick={() => setOpen(true)}>View Upload Status</Button>
    <UploadQueueModal 
      open={open} 
      onClose={() => setOpen(false)} 
      files={files} 
      onCancelItem={(id) => setFiles(prev => prev.filter(f => f.id !== id))}
    />
  </>
);

Component API

UploadQueueModal

Prop	Type	Default	Description
open	`boolean`	`-`	Whether the modal is open
onClose	`(() => void)`	`-`	Callback when the modal is closed
files	`UploadQueueItem[]`	`[]`	List of files in the upload queue
onCancelItem	`((id: string) => void)`	`-`	Callback when a file is cancelled/removed
title	`string`	`-`	Optional title to override the auto-generated one
defaultMinimized	`boolean`	`false`	Whether the modal should start minimized
className	`string`	`-`	Additional class name

Variants

Basic Queue

Displays the upload queue in various states (Uploading, Success, Error, Pending).

Basic Queue

import { UploadQueueModal, type UploadQueueItem, Button } from '@photonix/ultimate';
import { useState } from 'react';

export default function BasicExample() {
  const [open, setOpen] = useState(false);
  const [files, setFiles] = useState<UploadQueueItem[]>([
    { id: '1', name: 'quarterly_report.pdf', size: 5242880, status: 'success', progress: 100 },
    { id: '2', name: 'corporate_video.mp4', size: 104857600, status: 'uploading', progress: 45 },
    { id: '3', name: 'unsupported_archive.rar', size: 26214400, status: 'error', progress: 0, error: 'File size limit exceeded' },
    { id: '4', name: 'profile_picture.png', size: 1572864, status: 'pending', progress: 0 }
  ]);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Static Queue</Button>
      <UploadQueueModal
        open={open}
        onClose={() => setOpen(false)}
        files={files}
        onCancelItem={(id) => setFiles(prev => prev.filter(f => f.id !== id))}
      />
    </>
  );
}

Interactive Simulator

Trigger mock uploads in real-time. Files progress automatically and show success/error states.

Interactive Simulator

// Use simulator helper with mock upload intervals
const simulateUpload = (id: string) => {
  // Update progress state periodically...
}

Minimized Default

Open the upload status panel minimized by default (showing only the header at the bottom-right).

Minimized Default

<UploadQueueModal 
  open={open} 
  files={files} 
  defaultMinimized={true} 
  onClose={() => setOpen(false)} 
/>

UploadQueueModal

Preview

Component API

UploadQueueModal

Variants

Basic Queue

Interactive Simulator

Minimized Default

On this page