@mcsoft/selector-archivo

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.