Selector de Archivo
Componente de React que permite seleccionar uno o varios archivos.
Instalación
npm install --save @mcsoft/selector-archivo
Uso
import McSelectorArchivo from '@mcsoft/selector-archivo';
class Ejemplo extends Component {
render () {
return (
<McSelectorArchivo
eventoArchivosSeleccionados={(archivos)=>this.eventoArchivosSeleccionados(archivos)}
/>
)
}
eventoArchivosSeleccionados(archivos) {
console.log('Archivos seleccionados: ', archivos);
}
}
Props (Obligatorios)
Propiedad | Tipo | Descripción |
---|---|---|
eventoArchivosSeleccionados | Function | Evento que se ejecuta cuando se selecciona un archivo. eventoArchivosSeleccionados(archivos: Array<objeto>) - archivos: Array<objeto> Arreglo de objetos con la información de los archivos seleccionados. |
Props (Opcionales)
Propiedad | Tipo | Predeterminado | Descripción |
---|---|---|---|
deshabilitado | boolean | false | Deshabilita el selector de archivos. |
deshabilitarArrastrar | boolean | false | Deshabilita la opcion arrastrar y soltar archivos sobre la zona de arrastre. |
deshabilitarClic | boolean | false | Deshabilita la opcion de abrir el navegador de archivos al hacer clic sobre la zona de arrastre. |
deshabilitarTeclado | boolean | false | Deshabilita la opcion de abrir el navegador de archivos al presionar space |
etiqueta | string | Etiqueta que se mostrará sobre el selector de archivos. | |
mostrarMiniaturas | boolean | false | Indica si se mostrarán las miniaturas de los archivos seleccionados [Solo para archivos de imagen]. |
tamanoMaximo | number | Tamaño máximo en bytes permitido para el archivo seleccionado. | |
tamanoMinimo | number | Tamaño mínimo en bytes permitido para el archivo seleccionado. | |
texto | object | Objeto con los textos personalizados del componente. | |
texto.listaArchivosTitulo | string | 'Archivos seleccionados' | Título de la lista de archivos seleccionados. |
texto.listaArchivosVacia | string | 'No se ha seleccionado ningún archivo.' | Mensaje que se mostrará en la lista de archivos mientras no se haya seleccionado ningún archivo. |
texto.mensaje | string | 'Arrastra y suelta los archivos aqui, o has clic para seleccionar los archivos.' | Mensaje que se mostrará en la zona de arrastre del selector de archivos. |
tiposArchivosAcceptados | Array<string> | Arreglo con los tipos de archivo (MIME Types) permitidos. | |
variosArchivos | boolean | false | Indica si se permitirá seleccionar varios archivos a la vez. |