veza/apps/web/src/components/ui/file-upload/FileUpload.tsx

62 lines
1.5 KiB
TypeScript
Raw Normal View History

import { cn } from '@/lib/utils';
import { useFileUpload } from './useFileUpload';
import { FileUploadDropzone } from './FileUploadDropzone';
import { FileUploadErrorList } from './FileUploadErrorList';
import { FileUploadFileList } from './FileUploadFileList';
import type { FileUploadProps } from './types';
/**
* FileUpload - Composant d'upload de fichiers avec drag & drop et preview
*/
export function FileUpload({
className,
...props
}: FileUploadProps) {
const {
dragActive,
files,
errors,
fileInputRef,
accept,
multiple,
maxSize,
showPreview,
disabled,
handleDrag,
handleDrop,
handleFileInput,
handleRemoveFile,
handleClick,
} = useFileUpload(props);
return (
<div className={cn('w-full', className)}>
<FileUploadDropzone
dragActive={dragActive}
disabled={disabled}
accept={accept}
multiple={multiple}
maxSize={maxSize}
onDragEnter={handleDrag}
onDragLeave={handleDrag}
onDragOver={handleDrag}
onDrop={handleDrop}
onClick={handleClick}
/>
<input
ref={fileInputRef}
type="file"
accept={accept}
multiple={multiple}
onChange={handleFileInput}
disabled={disabled}
className="hidden"
/>
<FileUploadErrorList errors={errors} />
{showPreview && (
<FileUploadFileList files={files} onRemove={handleRemoveFile} />
)}
</div>
);
}