383 lines
13 KiB
TypeScript
383 lines
13 KiB
TypeScript
'use client';
|
|
import { createGlobalState } from 'react-global-hooks';
|
|
import { Dialog, DialogBackdrop, DialogPanel, DialogTitle } from '@headlessui/react';
|
|
import { FaUpload, FaTimesCircle, FaSpinner } from 'react-icons/fa';
|
|
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
import { useDropzone } from 'react-dropzone';
|
|
import { apiClient } from '@/utils/api';
|
|
|
|
export interface AddImagesModalState {
|
|
datasetName: string;
|
|
onComplete?: () => void;
|
|
openedByDrag?: boolean;
|
|
}
|
|
|
|
export const addImagesModalState = createGlobalState<AddImagesModalState | null>(null);
|
|
|
|
export const openImagesModal = (datasetName: string, onComplete: () => void) => {
|
|
addImagesModalState.set({ datasetName, onComplete });
|
|
};
|
|
|
|
/** Call on a page that knows its datasetName — auto-opens the modal when files are dragged onto the page. */
|
|
export function useOpenImagesModalOnDrag(datasetName: string, onComplete: () => void) {
|
|
const onCompleteRef = useRef(onComplete);
|
|
onCompleteRef.current = onComplete;
|
|
|
|
useEffect(() => {
|
|
if (!datasetName) return;
|
|
|
|
let depth = 0;
|
|
const isFileDrag = (e: DragEvent) => {
|
|
const types = e?.dataTransfer?.types;
|
|
return !!types && Array.from(types).includes('Files');
|
|
};
|
|
|
|
const onDragEnter = (e: DragEvent) => {
|
|
if (!isFileDrag(e)) return;
|
|
depth += 1;
|
|
if (depth === 1) {
|
|
if (!addImagesModalState.get()) {
|
|
addImagesModalState.set({ datasetName, onComplete: onCompleteRef.current, openedByDrag: true });
|
|
}
|
|
}
|
|
e.preventDefault();
|
|
};
|
|
const onDragLeave = (e: DragEvent) => {
|
|
if (!isFileDrag(e)) return;
|
|
depth = Math.max(0, depth - 1);
|
|
if (depth === 0) {
|
|
const current = addImagesModalState.get();
|
|
if (current?.openedByDrag) {
|
|
addImagesModalState.set(null);
|
|
}
|
|
}
|
|
};
|
|
const onDrop = (e: DragEvent) => {
|
|
if (!isFileDrag(e)) return;
|
|
depth = 0;
|
|
// Files were dropped — modal is now committed, no longer dismissable by drag-out
|
|
const current = addImagesModalState.get();
|
|
if (current?.openedByDrag) {
|
|
addImagesModalState.set({ ...current, openedByDrag: false });
|
|
}
|
|
};
|
|
|
|
window.addEventListener('dragenter', onDragEnter);
|
|
window.addEventListener('dragleave', onDragLeave);
|
|
window.addEventListener('drop', onDrop);
|
|
return () => {
|
|
window.removeEventListener('dragenter', onDragEnter);
|
|
window.removeEventListener('dragleave', onDragLeave);
|
|
window.removeEventListener('drop', onDrop);
|
|
};
|
|
}, [datasetName]);
|
|
}
|
|
|
|
type AcceptMap = { [mime: string]: string[] };
|
|
type FileStatus = 'pending' | 'uploading' | 'error';
|
|
|
|
interface FileEntry {
|
|
id: number;
|
|
file: File;
|
|
status: FileStatus;
|
|
progress: number;
|
|
error?: string;
|
|
}
|
|
|
|
const MAX_CONCURRENT = 3;
|
|
const ROW_HEIGHT = 32;
|
|
const VISIBLE_ROWS = 8;
|
|
|
|
let nextId = 0;
|
|
|
|
export default function AddImagesModal() {
|
|
const [modalInfo, setModalInfo] = addImagesModalState.use();
|
|
const open = modalInfo !== null;
|
|
|
|
const [isUploading, setIsUploading] = useState(false);
|
|
const [fileEntries, setFileEntries] = useState<FileEntry[]>([]);
|
|
const [totalCount, setTotalCount] = useState(0);
|
|
const [doneCount, setDoneCount] = useState(0);
|
|
const [errorCount, setErrorCount] = useState(0);
|
|
const abortRef = useRef(false);
|
|
const modalInfoRef = useRef(modalInfo);
|
|
modalInfoRef.current = modalInfo;
|
|
|
|
const datasetName = modalInfo?.datasetName ?? '';
|
|
|
|
const uploadSingleFile = useCallback(
|
|
async (entry: FileEntry): Promise<'done' | 'error'> => {
|
|
if (abortRef.current) return 'error';
|
|
|
|
const id = entry.id;
|
|
setFileEntries(prev =>
|
|
prev.map(e => (e.id === id ? { ...e, status: 'uploading' as FileStatus, progress: 0 } : e)),
|
|
);
|
|
|
|
const formData = new FormData();
|
|
formData.append('files', entry.file);
|
|
formData.append('datasetName', datasetName || '');
|
|
|
|
try {
|
|
await apiClient.post('/api/datasets/upload', formData, {
|
|
headers: { 'Content-Type': 'multipart/form-data' },
|
|
onUploadProgress: pe => {
|
|
const percent = Math.round(((pe.loaded || 0) * 100) / (pe.total || pe.loaded || 1));
|
|
setFileEntries(prev => prev.map(e => (e.id === id ? { ...e, progress: percent } : e)));
|
|
},
|
|
timeout: 0,
|
|
});
|
|
setFileEntries(prev => prev.filter(e => e.id !== id));
|
|
setDoneCount(prev => prev + 1);
|
|
return 'done';
|
|
} catch (err) {
|
|
console.error(`Upload failed for ${entry.file.name}:`, err);
|
|
setFileEntries(prev =>
|
|
prev.map(e =>
|
|
e.id === id
|
|
? { ...e, status: 'error' as FileStatus, error: err instanceof Error ? err.message : 'Upload failed' }
|
|
: e,
|
|
),
|
|
);
|
|
setErrorCount(prev => prev + 1);
|
|
return 'error';
|
|
}
|
|
},
|
|
[datasetName],
|
|
);
|
|
|
|
const resetState = useCallback(() => {
|
|
setFileEntries([]);
|
|
setTotalCount(0);
|
|
setDoneCount(0);
|
|
setErrorCount(0);
|
|
}, []);
|
|
|
|
const processQueue = useCallback(
|
|
async (entries: FileEntry[]) => {
|
|
setIsUploading(true);
|
|
abortRef.current = false;
|
|
|
|
let nextIndex = 0;
|
|
const runNext = async (): Promise<void> => {
|
|
while (nextIndex < entries.length) {
|
|
if (abortRef.current) return;
|
|
const idx = nextIndex++;
|
|
await uploadSingleFile(entries[idx]);
|
|
}
|
|
};
|
|
|
|
const workers = Array.from({ length: Math.min(MAX_CONCURRENT, entries.length) }, () => runNext());
|
|
await Promise.all(workers);
|
|
|
|
setIsUploading(false);
|
|
if (!abortRef.current) {
|
|
modalInfoRef.current?.onComplete?.();
|
|
setModalInfo(null);
|
|
resetState();
|
|
}
|
|
},
|
|
[uploadSingleFile, setModalInfo, resetState],
|
|
);
|
|
|
|
const onDrop = useCallback(
|
|
(acceptedFiles: File[]) => {
|
|
if (acceptedFiles.length === 0) return;
|
|
|
|
const entries: FileEntry[] = acceptedFiles.map(file => ({
|
|
id: nextId++,
|
|
file,
|
|
status: 'pending' as FileStatus,
|
|
progress: 0,
|
|
}));
|
|
setFileEntries(entries);
|
|
setTotalCount(entries.length);
|
|
setDoneCount(0);
|
|
setErrorCount(0);
|
|
processQueue(entries);
|
|
},
|
|
[processQueue],
|
|
);
|
|
|
|
const handleCancel = useCallback(() => {
|
|
abortRef.current = true;
|
|
setIsUploading(false);
|
|
setModalInfo(null);
|
|
resetState();
|
|
}, [setModalInfo, resetState]);
|
|
|
|
const dropAccept = useMemo<AcceptMap>(
|
|
() => ({
|
|
'image/*': ['.png', '.jpg', '.jpeg', '.gif', '.bmp', '.webp'],
|
|
'video/*': ['.mp4', '.avi', '.mov', '.mkv', '.wmv', '.m4v', '.flv'],
|
|
'audio/*': ['.mp3', '.wav'],
|
|
'text/*': ['.txt'],
|
|
}),
|
|
[],
|
|
);
|
|
|
|
const {
|
|
getRootProps,
|
|
getInputProps,
|
|
isDragActive,
|
|
open: openFilePicker,
|
|
} = useDropzone({
|
|
onDrop,
|
|
accept: dropAccept,
|
|
multiple: true,
|
|
noClick: true,
|
|
noKeyboard: true,
|
|
});
|
|
|
|
const overallPercent = totalCount > 0 ? Math.round(((doneCount + errorCount) / totalCount) * 100) : 0;
|
|
|
|
return (
|
|
<Dialog
|
|
open={open}
|
|
onClose={() => {
|
|
if (!isUploading) handleCancel();
|
|
}}
|
|
className="relative z-10"
|
|
>
|
|
<DialogBackdrop
|
|
transition
|
|
className="fixed inset-0 bg-gray-900/75 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"
|
|
/>
|
|
|
|
<div className="fixed inset-0 z-10 w-screen overflow-y-auto">
|
|
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
|
|
<DialogPanel
|
|
transition
|
|
className="relative transform overflow-hidden rounded-lg bg-gray-800 text-left shadow-xl transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-full sm:max-w-lg data-closed:sm:translate-y-0 data-closed:sm:scale-95"
|
|
>
|
|
<div className="bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
|
<div className="text-center">
|
|
<DialogTitle as="h3" className="text-base font-semibold text-gray-200 mb-4">
|
|
Add Images to: {datasetName}
|
|
</DialogTitle>
|
|
|
|
{/* Drop zone + click to select */}
|
|
<div {...getRootProps()} className="w-full">
|
|
<input {...getInputProps()} />
|
|
<div
|
|
onClick={() => {
|
|
if (!isUploading) openFilePicker();
|
|
}}
|
|
className={`h-40 w-full flex flex-col items-center justify-center border-2 border-dashed rounded-lg cursor-pointer transition-colors
|
|
${isDragActive ? 'border-blue-400 bg-blue-500/10' : 'border-gray-600 hover:border-gray-400'}`}
|
|
>
|
|
<FaUpload className="size-8 mb-3 text-gray-400" />
|
|
{!isUploading ? (
|
|
<>
|
|
<p className="text-sm text-gray-200 text-center">Drag & drop files here or click to select</p>
|
|
<p className="text-xs text-gray-400 mt-1">Images, videos, or .txt supported</p>
|
|
</>
|
|
) : (
|
|
<p className="text-sm text-gray-200 text-center">Drop more files to add to queue</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Upload progress */}
|
|
{isUploading && (
|
|
<div className="mt-4">
|
|
<p className="text-sm font-semibold text-gray-200 mb-2">
|
|
Uploading… {doneCount + errorCount} / {totalCount}
|
|
</p>
|
|
<div className="w-full h-2.5 bg-white/20 rounded-full overflow-hidden">
|
|
<div
|
|
className="h-2.5 bg-blue-500 rounded-full transition-[width] duration-150 ease-linear"
|
|
style={{ width: `${overallPercent}%` }}
|
|
/>
|
|
</div>
|
|
{errorCount > 0 && (
|
|
<p className="text-xs text-red-400 mt-1">
|
|
{errorCount} file{errorCount !== 1 ? 's' : ''} failed
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* File progress list */}
|
|
{fileEntries.length > 0 && (
|
|
<div className="mt-3">
|
|
<FileProgressList entries={fileEntries} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="bg-gray-700 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
|
|
<button
|
|
type="button"
|
|
onClick={handleCancel}
|
|
className={`inline-flex w-full justify-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-xs sm:ml-3 sm:w-auto ${
|
|
isUploading ? 'bg-red-600 hover:bg-red-500' : 'bg-gray-600 hover:bg-gray-500'
|
|
}`}
|
|
>
|
|
{isUploading ? 'Cancel Upload' : 'Close'}
|
|
</button>
|
|
</div>
|
|
</DialogPanel>
|
|
</div>
|
|
</div>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
/** Virtualized file progress list */
|
|
function FileProgressList({ entries }: { entries: FileEntry[] }) {
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const [scrollTop, setScrollTop] = useState(0);
|
|
|
|
const totalHeight = entries.length * ROW_HEIGHT;
|
|
const containerHeight = Math.min(entries.length, VISIBLE_ROWS) * ROW_HEIGHT;
|
|
|
|
const startIdx = Math.floor(scrollTop / ROW_HEIGHT);
|
|
const endIdx = Math.min(entries.length, startIdx + VISIBLE_ROWS + 2);
|
|
const visibleEntries = entries.slice(startIdx, endIdx);
|
|
const offsetY = startIdx * ROW_HEIGHT;
|
|
|
|
const onScroll = useCallback(() => {
|
|
if (containerRef.current) {
|
|
setScrollTop(containerRef.current.scrollTop);
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<div
|
|
ref={containerRef}
|
|
onScroll={onScroll}
|
|
className="rounded-xl bg-black/60 backdrop-blur-sm border border-white/10 overflow-y-auto"
|
|
style={{ height: containerHeight + 2 }}
|
|
>
|
|
<div style={{ height: totalHeight, position: 'relative' }}>
|
|
<div style={{ position: 'absolute', top: offsetY, left: 0, right: 0 }}>
|
|
{visibleEntries.map(entry => (
|
|
<FileRow key={entry.id} entry={entry} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function FileRow({ entry }: { entry: FileEntry }) {
|
|
return (
|
|
<div className="flex items-center gap-2 px-3 text-xs font-mono" style={{ height: ROW_HEIGHT }}>
|
|
<span className="flex-shrink-0 w-4 text-center">
|
|
{entry.status === 'error' && <FaTimesCircle className="text-red-400 inline" />}
|
|
{entry.status === 'uploading' && <FaSpinner className="text-blue-400 inline animate-spin" />}
|
|
{entry.status === 'pending' && <span className="inline-block w-2 h-2 rounded-full bg-white/30" />}
|
|
</span>
|
|
<span className="truncate flex-1 opacity-80" title={entry.file.name}>
|
|
{entry.file.name}
|
|
</span>
|
|
<span className="flex-shrink-0 w-16 text-right">
|
|
{entry.status === 'uploading' && <span className="text-blue-300">{entry.progress}%</span>}
|
|
{entry.status === 'error' && <span className="text-red-400">Failed</span>}
|
|
{entry.status === 'pending' && <span className="text-white/30">Queued</span>}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|