- Add file-upload/ with useFileUpload, types, utils, and presentational components: FileUploadDropzone, FileUploadErrorList, FileUploadFileList - Remove monolithic file-upload.tsx; entry point is file-upload/index.ts - Backward compatible: imports from './file-upload' resolve to module Co-authored-by: Cursor <cursoragent@cursor.com>
61 lines
1.5 KiB
TypeScript
61 lines
1.5 KiB
TypeScript
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>
|
|
);
|
|
}
|