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|enter mientras la zona de arrastre esta seleccionada. | | 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. |