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
+4 -1
View File
@@ -107,11 +107,14 @@ export function saveCanvas(boardId: string, canvasState: string, thumbnail?: str
return api.post(`/api/boards/${boardId}/save`, { canvas_state: canvasState, thumbnail });
}
export function uploadImage(boardId: string, file: File) {
export function uploadImage(boardId: string, file: File, onProgress?: (progress: number) => void) {
const formData = new FormData();
formData.append('image', file);
return api.post(`/api/upload/boards/${boardId}/images`, formData, {
headers: { 'Content-Type': 'multipart/form-data' },
onUploadProgress: onProgress
? (e) => { if (e.total) onProgress(e.loaded / e.total); }
: undefined,
});
}