77 lines
3.1 KiB
TypeScript
77 lines
3.1 KiB
TypeScript
import React, { useCallback, useState } from 'react';
|
|
import { UploadIcon } from './icons/UploadIcon';
|
|
|
|
interface BulkImporterProps {
|
|
onProcess: (files: FileList) => void;
|
|
isProcessing: boolean;
|
|
}
|
|
|
|
export const BulkImporter: React.FC<BulkImporterProps> = ({ onProcess, isProcessing }) => {
|
|
const [isDragging, setIsDragging] = useState(false);
|
|
|
|
const handleFiles = (files: FileList | null) => {
|
|
if (files && files.length > 0 && !isProcessing) {
|
|
onProcess(files);
|
|
}
|
|
};
|
|
|
|
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
handleFiles(e.target.files);
|
|
// Reset input value to allow selecting the same file again
|
|
e.target.value = '';
|
|
};
|
|
|
|
const handleDragEnter = useCallback((e: React.DragEvent<HTMLLabelElement>) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (!isProcessing) setIsDragging(true);
|
|
}, [isProcessing]);
|
|
|
|
const handleDragLeave = useCallback((e: React.DragEvent<HTMLLabelElement>) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
setIsDragging(false);
|
|
}, []);
|
|
|
|
const handleDrop = useCallback((e: React.DragEvent<HTMLLabelElement>) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
setIsDragging(false);
|
|
if (!isProcessing && e.dataTransfer.files) {
|
|
handleFiles(e.dataTransfer.files);
|
|
}
|
|
}, [isProcessing, onProcess]);
|
|
|
|
const borderColor = isDragging ? 'border-brand-primary' : 'border-gray-300 dark:border-gray-600';
|
|
const bgColor = isDragging ? 'bg-brand-light/50 dark:bg-brand-dark/20' : 'bg-gray-50 dark:bg-gray-800';
|
|
|
|
return (
|
|
<div className="flex flex-col items-center justify-center w-full">
|
|
<label
|
|
htmlFor="bulk-file-upload"
|
|
onDragEnter={handleDragEnter}
|
|
onDragOver={handleDragEnter}
|
|
onDragLeave={handleDragLeave}
|
|
onDrop={handleDrop}
|
|
className={`flex flex-col items-center justify-center w-full h-48 border-2 ${borderColor} border-dashed rounded-lg transition-colors duration-300 ${isProcessing ? 'cursor-not-allowed opacity-60' : 'cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700'}`}
|
|
>
|
|
<div className="flex flex-col items-center justify-center pt-5 pb-6 text-center">
|
|
<UploadIcon className="w-10 h-10 mb-3 text-gray-400" />
|
|
{isProcessing ? (
|
|
<p className="mb-2 text-sm text-gray-600 dark:text-gray-300 font-semibold">
|
|
Processing, please wait...
|
|
</p>
|
|
) : (
|
|
<>
|
|
<p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
|
|
<span className="font-semibold text-brand-primary">Click to upload</span> or drag and drop
|
|
</p>
|
|
<p className="text-xs text-gray-500 dark:text-gray-400">PNG, JPG, WEBP, or PDF</p>
|
|
</>
|
|
)}
|
|
</div>
|
|
<input id="bulk-file-upload" type="file" className="hidden" accept="image/png, image/jpeg, image/webp, application/pdf" onChange={handleFileChange} disabled={isProcessing} multiple />
|
|
</label>
|
|
</div>
|
|
);
|
|
}; |