feat: add Upload Manager with progress tracking and status panel

- UploadManager store: tracks jobs through uploading → processing → done/failed
- UploadPanel component: floating bottom-left widget showing upload progress,
  file names, sizes, status with auto-dismiss for completed items
- axios onUploadProgress wired for real-time upload percentage
- Video jobs transition to "processing" after upload, then "done" when
  media:job:update socket event arrives (reuses existing pipeline)
- Failed uploads show error message from server response
- Clear button to dismiss finished/failed items
This commit is contained in:
Hiren Kangad
2026-03-10 18:56:25 +05:30
parent 26527006a6
commit 38fb3edf14
6 changed files with 320 additions and 11 deletions
+7 -1
View File
@@ -23,6 +23,8 @@ import VideoControls from '../components/VideoControls';
import ShortcutsHelp from '../components/ShortcutsHelp';
import MattermostImport from '../components/MattermostImport';
import Minimap from '../components/Minimap';
import UploadPanel from '../components/UploadPanel';
import { UploadManager } from '../stores/uploadManager';
import { InboxZone } from '../canvas/InboxZone';
import { getItemWorldBounds } from '../canvas/SceneManager';
import { VideoSprite } from '../canvas/sprites/VideoSprite';
@@ -60,6 +62,7 @@ export default function Editor({ isPublicView }: EditorProps) {
const inboxZoneRef = useRef<InboxZone | null>(null);
const clipboardRef = useRef<SceneItem[]>([]);
const canvasContainerRef = useRef<HTMLDivElement>(null);
const [uploadManager] = useState(() => new UploadManager());
// UI state
const [activeTool, setActiveTool] = useState<ToolType>(ToolType.SELECT);
@@ -146,7 +149,7 @@ export default function Editor({ isPublicView }: EditorProps) {
useCanvasSetup({
boardData, resolvedBoardId, user, isPublicView,
canvasRef, selectionRef, undoRef, syncRef, inboxZoneRef, canvasContainerRef,
onCanvasChange, showToast, setOnlineUsers, setSelectedLayerIds,
uploadManager, onCanvasChange, showToast, setOnlineUsers, setSelectedLayerIds,
});
// Tool activation
@@ -631,6 +634,9 @@ export default function Editor({ isPublicView }: EditorProps) {
/>
)}
{/* Upload progress panel */}
<UploadPanel uploadManager={uploadManager} />
{/* Toasts */}
<div style={{
position: 'absolute', bottom: '12px', left: '50%', transform: 'translateX(-50%)',