feat: add batch conversion support with multi-file upload and ZIP download
Major improvements: - Updated FileUpload component to support multiple file selection - Added drag-and-drop for multiple files - Individual file removal - "Add More Files" button when files are selected - Modified FileConverter to handle batch conversions - Sequential conversion of multiple files - Progress tracking for each file individually - All files share same output format and settings - Added batch download functionality - Single file: direct download - Multiple files: ZIP archive download - Uses jszip library for ZIP creation - Enhanced UI/UX - Show count of selected files in convert button - Display all conversion jobs with individual previews - "Download All" button for completed conversions - Conversion status messages show success/failure counts Dependencies added: - jszip@3.10.1 for ZIP file creation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -7,9 +7,9 @@ import { formatFileSize } from '@/lib/utils/fileUtils';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
|
||||
export interface FileUploadProps {
|
||||
onFileSelect: (file: File) => void;
|
||||
onFileRemove: () => void;
|
||||
selectedFile?: File;
|
||||
onFileSelect: (files: File[]) => void;
|
||||
onFileRemove: (index: number) => void;
|
||||
selectedFiles?: File[];
|
||||
accept?: string;
|
||||
maxSizeMB?: number;
|
||||
disabled?: boolean;
|
||||
@@ -18,7 +18,7 @@ export interface FileUploadProps {
|
||||
export function FileUpload({
|
||||
onFileSelect,
|
||||
onFileRemove,
|
||||
selectedFile,
|
||||
selectedFiles = [],
|
||||
accept,
|
||||
maxSizeMB = 500,
|
||||
disabled = false,
|
||||
@@ -54,26 +54,36 @@ export function FileUpload({
|
||||
|
||||
const files = Array.from(e.dataTransfer.files);
|
||||
if (files.length > 0) {
|
||||
handleFile(files[0]);
|
||||
handleFiles(files);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFileInput = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const files = Array.from(e.target.files || []);
|
||||
if (files.length > 0) {
|
||||
handleFile(files[0]);
|
||||
handleFiles(files);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFile = (file: File) => {
|
||||
// Check file size
|
||||
const handleFiles = (files: File[]) => {
|
||||
// Check file sizes
|
||||
const maxBytes = maxSizeMB * 1024 * 1024;
|
||||
if (file.size > maxBytes) {
|
||||
alert(`File size exceeds ${maxSizeMB}MB limit. Please choose a smaller file.`);
|
||||
return;
|
||||
const validFiles = files.filter(file => {
|
||||
if (file.size > maxBytes) {
|
||||
alert(`${file.name} exceeds ${maxSizeMB}MB limit and will be skipped.`);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
if (validFiles.length > 0) {
|
||||
onFileSelect(validFiles);
|
||||
}
|
||||
|
||||
onFileSelect(file);
|
||||
// Reset input
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
const handleClick = () => {
|
||||
@@ -82,45 +92,58 @@ export function FileUpload({
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemove = (e: React.MouseEvent) => {
|
||||
const handleRemove = (index: number) => (e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
onFileRemove();
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = '';
|
||||
}
|
||||
onFileRemove(index);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="w-full space-y-3">
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
multiple
|
||||
className="hidden"
|
||||
accept={accept}
|
||||
onChange={handleFileInput}
|
||||
disabled={disabled}
|
||||
/>
|
||||
|
||||
{selectedFile ? (
|
||||
<div className="border-2 border-border rounded-lg p-6 bg-card">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-foreground truncate">{selectedFile.name}</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
{formatFileSize(selectedFile.size)}
|
||||
</p>
|
||||
{selectedFiles.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{selectedFiles.map((file, index) => (
|
||||
<div key={`${file.name}-${index}`} className="border-2 border-border rounded-lg p-4 bg-card">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-foreground truncate">{file.name}</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
{formatFileSize(file.size)}
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={handleRemove(index)}
|
||||
disabled={disabled}
|
||||
className="ml-4"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
<span className="sr-only">Remove file</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={handleRemove}
|
||||
disabled={disabled}
|
||||
className="ml-4"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
<span className="sr-only">Remove file</span>
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Add more files button */}
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleClick}
|
||||
disabled={disabled}
|
||||
className="w-full"
|
||||
>
|
||||
<Upload className="h-4 w-4 mr-2" />
|
||||
Add More Files
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
@@ -141,10 +164,10 @@ export function FileUpload({
|
||||
>
|
||||
<Upload className="mx-auto h-12 w-12 text-muted-foreground mb-4" />
|
||||
<p className="text-sm font-medium text-foreground mb-1">
|
||||
Drop your file here or click to browse
|
||||
Drop your files here or click to browse
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Maximum file size: {maxSizeMB}MB
|
||||
Maximum file size: {maxSizeMB}MB per file
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user