@adamosuiteservices/ui 2.14.2 → 2.15.1

package/docs/components/ui/file-upload.md

@@ -17,6 +17,9 @@ Componente de carga de archivos con funcionalidad **drag & drop**, validación d
 - ✅ Límite de cantidad de archivos en modo múltiple
 - ✅ Etiquetas personalizables (i18n)
 - ✅ Estado de arrastre visual (borde y fondo cambian)
+- ✅ Estados de validación con `aria-invalid`
+- ✅ Estados deshabilitados con `disabled`
+- ✅ Detección automática de fieldset disabled
 - ✅ Integración con formularios React
 - ✅ TypeScript completo con tipos exportados
 
@@ -24,7 +27,10 @@ Componente de carga de archivos con funcionalidad **drag & drop**, validación d
 
 ```typescript
 import { FileUpload } from "@adamosuiteservices/ui/file-upload";
-import type { FileUploadProps, FileUploadLabels } from "@adamosuiteservices/ui/file-upload";
+import type {
+  FileUploadProps,
+  FileUploadLabels,
+} from "@adamosuiteservices/ui/file-upload";
 ```
 
 ## Uso Básico
@@ -38,12 +44,7 @@ import { FileUpload } from "@adamosuiteservices/ui/file-upload";
 function MyForm() {
   const [file, setFile] = useState<File | null>(null);
 
-  return (
-    <FileUpload
-      selectedFile={file}
-      onFileSelect={setFile}
-    />
-  );
+  return <FileUpload selectedFile={file} onFileSelect={setFile} />;
 }
 ```
 
@@ -56,17 +57,12 @@ import { FileUpload } from "@adamosuiteservices/ui/file-upload";
 function MyForm() {
   const [files, setFiles] = useState<File[]>([]);
 
-  return (
-    <FileUpload
-      selectedFiles={files}
-      onFilesSelect={setFiles}
-      multiple
-    />
-  );
+  return <FileUpload selectedFiles={files} onFilesSelect={setFiles} multiple />;
 }
 ```
 
 **Configuración por defecto**:
+
 - Extensiones aceptadas: `.xls`, `.xlsx`, `.numbers`
 - Tamaño máximo: 50 MB
 - Máximo de archivos (modo múltiple): 10
@@ -101,7 +97,8 @@ acceptedExtensions?: string[]
 Array de extensiones de archivo permitidas. Por defecto: `[".xls", ".xlsx", ".numbers"]`
 
 **Ejemplo**:
-```tsx
+
+````tsx
 <FileUpload
   selectedFile={file}
   onFileSelect={setFile}
@@ -111,17 +108,14 @@ Array de extensiones de archivo permitidas. Por defecto: `[".xls", ".xlsx", ".nu
 
 ```tsx
 maxSizeInMB?: number
-```
+````
 
 Tamaño máximo del archivo en megabytes. Por defecto: `50`
 
 **Ejemplo**:
+
 ```tsx
-<FileUpload
-  selectedFile={file}
-  onFileSelect={setFile}
-  maxSizeInMB={10}
-/>
+<FileUpload selectedFile={file} onFileSelect={setFile} maxSizeInMB={10} />
 ```
 
 #### labels
@@ -140,6 +134,7 @@ type FileUploadLabels = {
 Etiquetas personalizables para internacionalización o textos específicos.
 
 **Ejemplo**:
+
 ```tsx
 <FileUpload
   selectedFile={file}
@@ -147,20 +142,39 @@ Etiquetas personalizables para internacionalización o textos específicos.
   labels={{
     dragDrop: "Arrastra y suelta tu archivo aquí o",
     selectFile: "Selecciona el archivo",
-    fileRequirements: "Archivos permitidos: .xls, .xlsx. Tamaño máximo 50 MB."
+    fileRequirements: "Archivos permitidos: .xls, .xlsx. Tamaño máximo 50 MB.",
   }}
 />
 ```
 
+#### aria-invalid
+
+```tsx
+"aria-invalid"?: boolean
+```
+
+Marca el componente como inválido, aplicando estilos destructivos. Útil para validación de formularios. Por defecto: `false`
+
+**Ejemplo**:
+
+```tsx
+<FileUpload
+  selectedFile={file}
+  onFileSelect={setFile}
+  aria-invalid={!!errorMessage}
+/>
+```
+
 #### invalid
 
 ```tsx
 invalid?: boolean
 ```
 
-Marca el componente como inválido, aplicando estilos destructivos. Por defecto: `false`
+Alternativa a `aria-invalid` para marcar el componente como inválido. Por defecto: `false`
 
 **Ejemplo**:
+
 ```tsx
 <FileUpload
   selectedFile={file}
@@ -169,6 +183,66 @@ Marca el componente como inválido, aplicando estilos destructivos. Por defecto:
 />
 ```
 
+#### disabled
+
+```tsx
+disabled?: boolean
+```
+
+Deshabilita el componente, impidiendo toda interacción del usuario. Por defecto: `false`
+
+**Comportamiento**:
+
+- El área de drag & drop se muestra deshabilitada con opacidad reducida
+- Los archivos seleccionados también se muestran deshabilitados
+- Los botones de eliminar archivos individuales están deshabilitados
+- El botón "Clear all" (en modo múltiple) está deshabilitado
+- Los estados de error visual no se muestran cuando está deshabilitado
+
+**Ejemplo**:
+
+```tsx
+<FileUpload selectedFile={file} onFileSelect={setFile} disabled />
+```
+
+**Nota**: El componente también detecta automáticamente si está dentro de un `<fieldset disabled>` y se deshabilitará automáticamente.
+
+#### input
+
+```tsx
+input?: ComponentProps<"input">
+```
+
+Props personalizadas para el elemento `<input type="file">` interno. Útil para personalizar el ID, name, data attributes, y otros atributos HTML.
+
+**Comportamiento**:
+- Si no se proporciona un `id`, se genera automáticamente con formato `file-upload-{random}`
+- Las props críticas (`type`, `accept`, `multiple`, `onChange`, `disabled`, `className`) siempre se mantienen para garantizar el funcionamiento correcto
+- Puedes sobrescribir cualquier otra prop HTML del input
+
+**Ejemplo**:
+
+```tsx
+// ID personalizado para asociar con label
+<FileUpload
+  selectedFile={file}
+  onFileSelect={setFile}
+  input={{ id: "document-upload" }}
+/>
+
+// Con múltiples atributos para integración con formularios
+<FileUpload
+  selectedFile={file}
+  onFileSelect={setFile}
+  input={{
+    id: "invoice-file",
+    name: "invoice",
+    "data-testid": "invoice-input",
+    "aria-describedby": "invoice-help",
+  }}
+/>
+```
+
 #### onInvalidFile
 
 ```tsx
@@ -178,6 +252,7 @@ onInvalidFile?: (file: File, reason: "extension" | "size") => void
 Callback invocado cuando un archivo no pasa la validación. Recibe el archivo y el motivo del rechazo.
 
 **Ejemplo**:
+
 ```tsx
 const handleInvalidFile = (file: File, reason: "extension" | "size") => {
   if (reason === "extension") {
@@ -192,7 +267,7 @@ const handleInvalidFile = (file: File, reason: "extension" | "size") => {
   onFileSelect={setFile}
   onInvalidFile={handleInvalidFile}
   invalid={!!error}
-/>
+/>;
 ```
 
 ### Modo Múltiple
@@ -236,10 +311,12 @@ filesPosition?: "above" | "below"
 ```
 
 Posición donde aparecen los archivos seleccionados en modo múltiple:
+
 - `"above"` - Archivos arriba del área de drag & drop
 - `"below"` - Archivos debajo del área de drag & drop (por defecto)
 
 **Ejemplo**:
+
 ```tsx
 <FileUpload
   selectedFiles={files}
@@ -265,7 +342,8 @@ type FileUploadLabels = {
 Etiquetas personalizables para internacionalización o textos específicos.
 
 **Ejemplo**:
-```tsx
+
+````tsx
 <FileUpload
   selectedFile={file}
   onFileSelect={setFile}
@@ -291,11 +369,12 @@ Etiquetas personalizables para internacionalización o textos específicos.
 
 ```tsx
 acceptedExtensions?: string[]
-```
+````
 
 Array de extensiones de archivo permitidas. Por defecto: `[".xls", ".xlsx", ".numbers"]`
 
 **Ejemplo**:
+
 ```tsx
 <FileUpload
   selectedFile={file}
@@ -313,12 +392,9 @@ maxSizeInMB?: number
 Tamaño máximo del archivo en megabytes. Por defecto: `50`
 
 **Ejemplo**:
+
 ```tsx
-<FileUpload
-  selectedFile={file}
-  onFileSelect={setFile}
-  maxSizeInMB={10}
-/>
+<FileUpload selectedFile={file} onFileSelect={setFile} maxSizeInMB={10} />
 ```
 
 ### labels
@@ -336,6 +412,7 @@ type FileUploadLabels = {
 Etiquetas personalizables para internacionalización o textos específicos.
 
 **Ejemplo**:
+
 ```tsx
 <FileUpload
   selectedFile={file}
@@ -343,16 +420,185 @@ Etiquetas personalizables para internacionalización o textos específicos.
   labels={{
     dragDrop: "Arrastra y suelta tu archivo aquí o",
     selectFile: "Selecciona el archivo",
-    fileRequirements: "Archivos permitidos: .xls, .xlsx. Tamaño máximo 50 MB."
+    fileRequirements: "Archivos permitidos: .xls, .xlsx. Tamaño máximo 50 MB.",
   }}
 />
 ```
 
 ## Ejemplos
 
-### Archivos de Excel (Por Defecto)
+### Con Componentes Field
+
+```tsx
+import {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+} from "@adamosuiteservices/ui/field";
+import { FileUpload } from "@adamosuiteservices/ui/file-upload";
+
+function FileUploadForm() {
+  const [file, setFile] = useState<File | null>(null);
+  const [error, setError] = useState<string>("");
+
+  const handleInvalidFile = (file: File, reason: "extension" | "size") => {
+    if (reason === "extension") {
+      setError(`File "${file.name}" has an invalid extension.`);
+    } else if (reason === "size") {
+      setError(`File "${file.name}" exceeds the maximum size limit.`);
+    }
+  };
+
+  return (
+    <FieldGroup className="adm:max-w-xl">
+      <Field>
+        <FieldLabel>Upload document (PDF or DOCX only, max 2MB)</FieldLabel>
+        <FileUpload
+          selectedFile={file}
+          onFileSelect={(newFile) => {
+            setFile(newFile);
+            if (newFile) setError("");
+          }}
+          onInvalidFile={handleInvalidFile}
+          aria-invalid={!!error}
+          acceptedExtensions={[".pdf", ".docx"]}
+          maxSizeInMB={2}
+        />
+        {error ? (
+          <FieldError>{error}</FieldError>
+        ) : (
+          <FieldDescription>
+            Supported formats: PDF, DOCX. Maximum 2MB.
+          </FieldDescription>
+        )}
+      </Field>
+    </FieldGroup>
+  );
+}
+```
+
+### Estado Deshabilitado
+
+```tsx
+import {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldGroup,
+} from "@adamosuiteservices/ui/field";
+
+function DisabledExample() {
+  const [file, setFile] = useState<File | null>(null);
+
+  return (
+    <FieldGroup className="adm:max-w-xl">
+      <Field>
+        <FieldLabel>Upload document (Disabled)</FieldLabel>
+        <FileUpload selectedFile={file} onFileSelect={setFile} disabled />
+        <FieldDescription>This file upload is disabled</FieldDescription>
+      </Field>
+    </FieldGroup>
+  );
+}
+
+// Con archivo ya seleccionado
+function DisabledWithFileExample() {
+  const mockFile = new File(["content"], "report.xlsx", {
+    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  });
+  const [file, setFile] = useState<File | null>(mockFile);
+
+  return (
+    <FieldGroup className="adm:max-w-xl">
+      <Field>
+        <FieldLabel>Upload document (Disabled)</FieldLabel>
+        <FileUpload selectedFile={file} onFileSelect={setFile} disabled />
+        <FieldDescription>
+          File is selected but cannot be removed while disabled
+        </FieldDescription>
+      </Field>
+    </FieldGroup>
+  );
+}
+```
+
+### Dentro de Fieldset Disabled
+
+```tsx
+import {
+  FieldSet,
+  FieldLegend,
+  FieldGroup,
+  Field,
+  FieldLabel,
+} from "@adamosuiteservices/ui/field";
+
+function FieldsetExample() {
+  const [file, setFile] = useState<File | null>(null);
+
+  return (
+    <FieldSet disabled>
+      <FieldLegend>Document upload (Fieldset disabled)</FieldLegend>
+      <FieldGroup>
+        <Field>
+          <FieldLabel>Upload document</FieldLabel>
+          <FileUpload
+            selectedFile={file}
+            onFileSelect={setFile}
+            className="adm:max-w-xl"
+          />
+        </Field>
+      </FieldGroup>
+    </FieldSet>
+  );
+}
+```
+
+**Nota**: El componente detecta automáticamente cuando está dentro de un `<fieldset disabled>` o `<FieldSet disabled>` y se deshabilita automáticamente.
+
+### Con Props de Input Personalizadas
 
 ```tsx
+import {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldGroup,
+} from "@adamosuiteservices/ui/field";
+
+function CustomInputPropsExample() {
+  const [file, setFile] = useState<File | null>(null);
+
+  return (
+    <FieldGroup className="adm:max-w-xl">
+      <Field>
+        <FieldLabel htmlFor="custom-document-upload">
+          Upload document
+        </FieldLabel>
+        <FileUpload
+          selectedFile={file}
+          onFileSelect={setFile}
+          input={{
+            id: "custom-document-upload",
+            name: "document",
+            "data-testid": "file-input",
+            "aria-describedby": "upload-description",
+          }}
+        />
+        <FieldDescription id="upload-description">
+          Custom input props allow you to set ID, name, and other attributes
+        </FieldDescription>
+      </Field>
+    </FieldGroup>
+  );
+}
+```
+
+### Archivos de Excel (Por Defecto)
+
+````tsx
 const [file, setFile] = useState<File | null>(null);
 
 <FileUpload
@@ -372,7 +618,7 @@ const [files, setFiles] = useState<File[]>([]);
     selectFile: "Select files"
   }}
 />
-```
+````
 
 ### Múltiples Imágenes
 
@@ -389,10 +635,12 @@ const [images, setImages] = useState<File[]>([]);
   labels={{
     dragDrop: "Drag and drop your images here or",
     selectFile: "Select images",
-    fileRequirements: "Supported formats: JPG, PNG, GIF, WebP. Max 5MB each. Up to 10 images.",
-    filesSelected: (count) => `${count} image${count !== 1 ? "s" : ""} selected`
+    fileRequirements:
+      "Supported formats: JPG, PNG, GIF, WebP. Max 5MB each. Up to 10 images.",
+    filesSelected: (count) =>
+      `${count} image${count !== 1 ? "s" : ""} selected`,
   }}
-/>
+/>;
 ```
 
 ### Archivos Arriba del Área de Drop
@@ -407,14 +655,14 @@ const [files, setFiles] = useState<File[]>([]);
   filesPosition="above"
   acceptedExtensions={[".pdf"]}
   maxSizeInMB={10}
-/>
+/>;
 ```
+
 />
-```
 
 ### Imágenes
 
-```tsx
+````tsx
 const [image, setImage] = useState<File | null>(null);
 
 ## Estados Visuales
@@ -452,7 +700,7 @@ Cuando el usuario arrastra archivos sobre el área:
 
 ### Estado Inválido
 
-Cuando `invalid={true}`:
+Cuando `invalid={true}` o `aria-invalid={true}`:
 - Borde: `border-destructive`
 - Fondo: `bg-destructive/5`
 - Icono de documento: `text-destructive` con fondo `bg-destructive/10`
@@ -460,16 +708,22 @@ Cuando `invalid={true}`:
 - Contador de archivos: `text-destructive`
 - Tarjetas de archivos: borde y fondo con colores destructivos
 
-## Validacióne={document}
-  onFileSelect={setDocument}
-  acceptedExtensions={[".pdf"]}
-  maxSizeInMB={20}
-  labels={{
-    dragDrop: "Drag and drop your PDF here or",
-    selectFile: "Select PDF",
-    fileRequirements: "Only PDF files. Maximum 20 MB."
-  }}
-/>
+### Estado Deshabilitado
+
+Cuando `disabled={true}` o está dentro de `<fieldset disabled>`:
+
+**Área de drag & drop**:
+- Opacidad: `opacity-50`
+- Cursor: `cursor-not-allowed`
+- Los estados de error visual no se aplican
+
+**Archivos seleccionados**:
+- Opacidad: `opacity-50`
+- Cursor: `cursor-not-allowed`
+- Botón de eliminar deshabilitado
+- Botón "Clear all" deshabilitado (modo múltiple)
+- Los colores destructivos no se muestran aunque `invalid={true}`
+
 ## Validación
 
 El componente valida automáticamente:
@@ -518,7 +772,7 @@ const handleInvalidFile = (file: File, reason: "extension" | "size") => {
     </Typography>
   </div>
 )}
-```
+````
 
 ## Comportamiento por Modo
 
@@ -558,9 +812,9 @@ const [archive, setArchive] = useState<File | null>(null);
   maxSizeInMB={500}
   labels={{
     dragDrop: "Drag and drop your archive here or",
-    selectFile: "Select the archive"
+    selectFile: "Select the archive",
   }}
-/>
+/>;
 ```
 
 ### Con Integración en Formulario
@@ -571,7 +825,7 @@ function UploadForm() {
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    
+
     if (!file) return;
 
     const formData = new FormData();
@@ -582,7 +836,7 @@ function UploadForm() {
         method: "POST",
         body: formData
       });
-      
+
 ### Botón de Remover
 
 - Variante: `destructive-medium`
@@ -617,6 +871,7 @@ function UploadForm() {
 ### Sin Archivo Seleccionado
 
 El componente muestra:
+
 - Área de drag & drop con borde punteado
 - Icono de documento en fondo azul claro
 - Texto instructivo y link para seleccionar archivo
@@ -625,6 +880,7 @@ El componente muestra:
 ### Durante Drag Over
 
 Cuando el usuario arrastra un archivo sobre el área:
+
 - Borde cambia a `border-primary-500`
 - Fondo cambia a `bg-primary-50`
 - Transición suave con `transition-colors`
@@ -632,6 +888,7 @@ Cuando el usuario arrastra un archivo sobre el área:
 ### Con Archivo Seleccionado
 
 El componente muestra:
+
 - Tarjeta con fondo `bg-neutral-100`
 - Icono de documento en fondo blanco
 - Nombre del archivo (con truncate si es largo)
@@ -687,9 +944,10 @@ border-primary-500 bg-primary-50
 - Label asociado correctamente con `htmlFor="file-upload"`
 - Botón de link usa `asChild` para comportamiento semántico
 - Typography con color `muted` para textos secundarios
+
 ## Tipos TypeScript
 
-```typescript
+````typescript
 export type FileUploadLabels = {
   dragDrop?: string
   selectFile?: string
@@ -701,22 +959,28 @@ export type FileUploadProps = ComponentProps<"div"> & Readonly<{
   // Modo simple
   selectedFile?: File | null
   onFileSelect?: (file: File | null) => void
-  
+
   // Modo múltiple
   selectedFiles?: File[]
   onFilesSelect?: (files: File[]) => void
   multiple?: boolean
   maxFiles?: number
   filesPosition?: "above" | "below"
-  
+
   // Validación
   onInvalidFile?: (file: File, reason: "extension" | "size") => void
   invalid?: boolean
-  
+  "aria-invalid"?: boolean
+
+  // Estados
+  disabled?: boolean
+
   // Común
   acceptedExtensions?: string[]
   maxSizeInMB?: number
   labels?: FileUploadLabels
+  input?: ComponentProps<"input">
+}>
 ### FormData para Upload
 
 ```tsx
@@ -750,7 +1014,8 @@ const uploadFiles = async (files: File[]) => {
 
   return response.json();
 };
-```
+````
+
 ```tsx
 // No validar el archivo antes de hacer upload
 // Siempre verificar que file no sea null
@@ -769,18 +1034,19 @@ labels={{ selectFile: "Select file" }} // Poco descriptivo
 
 ```typescript
 export type FileUploadLabels = {
-  dragDrop?: string
-  selectFile?: string
-  fileRequirements?: string
+  dragDrop?: string;
+  selectFile?: string;
+  fileRequirements?: string;
 };
 
-export type FileUploadProps = ComponentProps<"div"> & Readonly<{
-  selectedFile: File | null
-  onFileSelect: (file: File | null) => void
-  acceptedExtensions?: string[]
-  maxSizeInMB?: number
-  labels?: FileUploadLabels
-}>;
+export type FileUploadProps = ComponentProps<"div"> &
+  Readonly<{
+    selectedFile: File | null;
+    onFileSelect: (file: File | null) => void;
+    acceptedExtensions?: string[];
+    maxSizeInMB?: number;
+    labels?: FileUploadLabels;
+  }>;
 ```
 
 ## Integración con Backend
@@ -791,13 +1057,16 @@ export type FileUploadProps = ComponentProps<"div"> & Readonly<{
 const uploadFile = async (file: File) => {
   const formData = new FormData();
   formData.append("file", file);
-  formData.append("metadata", JSON.stringify({
-    uploadedAt: new Date().toISOString()
-  }));
+  formData.append(
+    "metadata",
+    JSON.stringify({
+      uploadedAt: new Date().toISOString(),
+    }),
+  );
 
   const response = await fetch("/api/upload", {
     method: "POST",
-    body: formData
+    body: formData,
   });
 
   return response.json();
@@ -806,7 +1075,7 @@ const uploadFile = async (file: File) => {
 
 ### Con Progress Tracking
 
-```tsx
+````tsx
 const [progress, setProgress] = useState(0);
 
 const uploadWithProgress = async (file: File) => {
@@ -826,6 +1095,9 @@ const uploadWithProgress = async (file: File) => {
 | Posición de preview | ❌ No configurable | ✅ Arriba o abajo |
 | UX consistente | ❌ Varía por browser | ✅ Consistente |
 | Labels customizables | ❌ No | ✅ Sí (i18n friendly) |
+| aria-invalid | ⚠️ Manual | ✅ Integrado |
+| Fieldset disabled | ⚠️ Nativo pero sin estilos | ✅ Detectado automáticamente |
+| Archivos deshabilitados | ❌ No soportado | ✅ Visual feedback completo |
 
 ## Notas
 
@@ -836,42 +1108,39 @@ const uploadWithProgress = async (file: File) => {
 - Los archivos no se almacenan automáticamente - manejar el upload con los callbacks
 - El componente es completamente controlado - el padre maneja el estado de los archivos
 - El input file es reutilizable: después de seleccionar, se resetea para permitir seleccionar el mismo archivo de nuevo
+- **Generación automática de ID**: Si no se proporciona un `id` en la prop `input`, se genera automáticamente con formato `file-upload-{random}` para garantizar accesibilidad
+- **Detección automática de fieldset**: El componente detecta cuando está dentro de un `<fieldset disabled>` usando MutationObserver y se deshabilita automáticamente
+- **Archivos seleccionados y disabled**: Cuando el componente está deshabilitado, los archivos seleccionados se muestran visualmente deshabilitados y no pueden ser removidos
+- Usar con los componentes Field (`Field`, `FieldLabel`, `FieldError`, etc.) para una mejor experiencia de formulario
 ```tsx
 <FileUpload
   selectedFile={file}
   onFileSelect={setFile}
   className="adm:max-w-2xl adm:mx-auto"
 />
-```
+````
 
 ### Con Wrapper Adicional
 
 ```tsx
 <div className="adm:space-y-4">
   <Label>Upload your document</Label>
-  <FileUpload
-    selectedFile={file}
-    onFileSelect={setFile}
-  />
-  {file && (
-    <Typography color="success">
-      ✓ File ready to upload
-    </Typography>
-  )}
+  <FileUpload selectedFile={file} onFileSelect={setFile} />
+  {file && <Typography color="success">✓ File ready to upload</Typography>}
 </div>
 ```
 
 ## Comparación con Input type="file"
 
-| Característica | Input file nativo | FileUpload |
-|----------------|-------------------|------------|
-| Drag & Drop | ❌ No | ✅ Sí |
-| Validación visual | ❌ No | ✅ Sí |
-| Preview del archivo | ❌ No | ✅ Sí con nombre y tamaño |
-| Extensiones validadas | ⚠️ Solo accept attribute | ✅ Con feedback visual |
-| Tamaño validado | ❌ Solo en backend | ✅ Cliente y servidor |
-| UX consistente | ❌ Varía por browser | ✅ Consistente |
-| Labels customizables | ❌ No | ✅ Sí (i18n friendly) |
+| Característica        | Input file nativo        | FileUpload                |
+| --------------------- | ------------------------ | ------------------------- |
+| Drag & Drop           | ❌ No                    | ✅ Sí                     |
+| Validación visual     | ❌ No                    | ✅ Sí                     |
+| Preview del archivo   | ❌ No                    | ✅ Sí con nombre y tamaño |
+| Extensiones validadas | ⚠️ Solo accept attribute | ✅ Con feedback visual    |
+| Tamaño validado       | ❌ Solo en backend       | ✅ Cliente y servidor     |
+| UX consistente        | ❌ Varía por browser     | ✅ Consistente            |
+| Labels customizables  | ❌ No                    | ✅ Sí (i18n friendly)     |
 
 ## Notas