InputFile

El componente InputFile permite a los usuarios seleccionar y subir archivos desde su dispositivo. Admite validaciones como tipos de archivo permitidos y tamaño máximo de archivo.

Ejemplo

Importación

Para importar el componente InputFile, se puede hacer desde fenextjs

import { InputFile } from "fenextjs";

Parámetros

Parámetro	Tipo	Requerido	Default	Descripcion
accept	string[]	no	[]	Tipos de archivo permitidos para la entrada. Ejemplo: ['jpg', 'png']
defaultValue	FileProps	no	{ fileData: '', text: '' }	Valor predeterminado del archivo. Usado para establecer un archivo inicial.
onChange	(v: FileProps) => void	no	undefined	Función que se ejecuta cuando se selecciona un archivo.
onChangeProgress	(v: number) => void	no	undefined	Función que se ejecuta al actualizar el progreso de la carga.
onChangeError	(v: ErrorProps \| undefined) => void	no	undefined	Función que se ejecuta cuando hay un error durante la carga.
onUploadFile	(data: InputFileUploadDataProps) => Promise<FileProps>	no	undefined	Función que se ejecuta para manejar la carga del archivo.
clearAfterUpload	boolean	no	false	Indica si se debe limpiar el input después de una carga éxitosa.
MAX_SIZE_FILE	number	no	5000000	Tamaño máximo del archivo en bytes que se puede subir.
parseProgress	(progres: number) => any	no	(e) => e	Función para analizar el progreso de la carga.
disabled	boolean	no	false	Indica si el input de archivo está deshabilitado.
textMaxSizeFile	string	no	'File max size'	Texto que se muestra al superar el tamaño máximo permitido.
className	string	no	''	Clase CSS para el componente principal.
classNameLabel	string	no	''	Clase CSS para la etiqueta del componente.
classNameContent	string	no	''	Clase CSS para el contenido del componente.
classNameInput	string	no	''	Clase CSS para el input de archivo.
classNameError	string	no	''	Clase CSS para el mensaje de error.

Storybook

Para ver el storybook del componente lo puede hacer con este link (opens in a new tab)

Usos

Selector de archivos con validación de tipo

<InputFile accept={["jpg", "png"]} onChange={(file) => console.log(file)} />

Selector de archivos con tamaño máximo

<InputFile
  MAX_SIZE_FILE={2000000}
  textMaxSizeFile="El archivo supera el límite de tamaño."
  onChange={(file) => console.log(file)}
/>

Selector de archivos deshabilitado

<InputFile disabled={true} onChange={(file) => console.log(file)} />

Daterange Filestatus