mirror of
https://github.com/siteboon/claudecodeui.git
synced 2026-06-26 13:35:49 +08:00
c235b05e1d
Users need a visible upload path from the explorer itself, not only drag and drop behavior with no progress feedback. Routing picker and drop uploads through one XHR-backed hook keeps progress, validation, refresh, and success counts consistent for every upload source. The 200MB limit is mirrored in the client, multer, and nginx template so large uploads fail predictably instead of being blocked by whichever layer sees the request first. The server also returns explicit requested and uploaded counts so partial or multi-file batches can render accurate status text.
91 lines
3.3 KiB
TypeScript
91 lines
3.3 KiB
TypeScript
import { AlertCircle, CheckCircle2, Upload } from 'lucide-react';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import { cn } from '../../../lib/utils';
|
|
import type { FileTreeUploadProgressState } from '../hooks/useFileTreeUpload';
|
|
|
|
type FileTreeUploadProgressProps = {
|
|
upload: FileTreeUploadProgressState | null;
|
|
};
|
|
|
|
const clampProgress = (progress: number) => Math.min(100, Math.max(0, progress));
|
|
|
|
const pluralizeFiles = (count: number) => (count === 1 ? 'file' : 'files');
|
|
|
|
export default function FileTreeUploadProgress({ upload }: FileTreeUploadProgressProps) {
|
|
const { t } = useTranslation();
|
|
|
|
if (!upload) {
|
|
return null;
|
|
}
|
|
|
|
const progress = clampProgress(upload.progress);
|
|
const isUploading = upload.status === 'uploading';
|
|
const isComplete = upload.status === 'complete';
|
|
const isError = upload.status === 'error';
|
|
const fileSummary =
|
|
upload.fileCount === 1 && upload.fileName
|
|
? upload.fileName
|
|
: `${upload.fileCount} ${pluralizeFiles(upload.fileCount)}`;
|
|
|
|
const title = isUploading
|
|
? t('fileTree.uploadingFiles', 'Uploading files')
|
|
: isComplete
|
|
? t('fileTree.uploadComplete', 'Upload complete')
|
|
: t('fileTree.uploadFailed', 'Upload failed');
|
|
|
|
const detail = isError
|
|
? upload.error
|
|
: isComplete && typeof upload.uploadedCount === 'number'
|
|
? t('fileTree.uploadedCount', 'Uploaded {{uploaded}} of {{total}} {{label}}', {
|
|
uploaded: upload.uploadedCount,
|
|
total: upload.fileCount,
|
|
label: pluralizeFiles(upload.fileCount),
|
|
})
|
|
: fileSummary;
|
|
|
|
const Icon = isError ? AlertCircle : isComplete ? CheckCircle2 : Upload;
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'border-b px-3 py-2 transition-colors',
|
|
isError
|
|
? 'border-red-500/20 bg-red-500/10 text-red-700 dark:text-red-300'
|
|
: isComplete
|
|
? 'border-emerald-500/20 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300'
|
|
: 'border-primary/20 bg-primary/10 text-foreground',
|
|
)}
|
|
>
|
|
<div className="flex min-h-[36px] items-center gap-2">
|
|
<div
|
|
className={cn(
|
|
'flex h-7 w-7 shrink-0 items-center justify-center rounded-md',
|
|
isError ? 'bg-red-500/15' : isComplete ? 'bg-emerald-500/15' : 'bg-primary/15',
|
|
)}
|
|
>
|
|
<Icon className={cn('h-3.5 w-3.5', isUploading && 'animate-pulse')} />
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<span className="truncate text-xs font-medium">{title}</span>
|
|
<span className="shrink-0 text-[11px] tabular-nums text-muted-foreground">
|
|
{isUploading ? `${progress}%` : isComplete ? t('common.done', 'Done') : t('common.failed', 'Failed')}
|
|
</span>
|
|
</div>
|
|
<div className="mt-1 truncate text-[11px] text-muted-foreground">{detail}</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-2 h-1.5 overflow-hidden rounded-full bg-background/80">
|
|
<div
|
|
className={cn(
|
|
'h-full rounded-full transition-[width] duration-200',
|
|
isError ? 'bg-red-500' : isComplete ? 'bg-emerald-500' : 'bg-primary',
|
|
)}
|
|
style={{ width: `${isError ? Math.max(progress, 8) : progress}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|