2

Tengo un proyecto en React pero en base a lo que voy a presentar aquí podre solucionar ese "problema" y lo pongo entre "" porque no es realmente un problema grande pero intento controlar todo lo que el usuario final podría intentar hacer.

introducir la descripción de la imagen aquí

Como pueden observar el IconButton con la carpeta si le doy click me abre la carpeta downloads que es donde tengo archivos .xlsx lo subo.

Dentro del IconButton tengo un codigo como el siguiente:

const iptExcell = document.getElementById('excel-input')
let contador = 0

  iptExcell.addEventListener('change', e => {
      e.preventDefault()
      contador += 1
      console.log(e)
      console.log(`Hola ${contador}`)
  })
<input title="ipt"  id='excel-input' accept=".xlsx, .csv" type="file"/>

El código exactamente no es así ya que es React (JSX) y no Js Vanilla pero al final de cuentas tienen la misma función que es subir un archivo Excel....

El inconveniente y que quisiera solucionar si se puede es que yo subo un archivo Excel y con los datos que están adentro me hace una consulta a un servicio por medio de axios y los datos que recibe los renderizo en una tabla (Eso para dar contexto), pero si quisiera subir el mismo Excel con los mismos datos no lo hace a no ser que agarre un Excel con datos diferentes ahí si hace una nueva consulta.

Pueden hacer la prueba con el código que puse, escojan un archivo Excel y verán en la consola que muestra el "hola" pero si intentan de nuevo subir el mismo Excel no muestra de nuevo el "hola" o sea que no llega nada pero si agarran otro Excel cualquiera si lo vuelve a hacer.

1 respuesta 1

1

El evento change solo se ejecuta cuando el valor que recibe ha cambiado, es por eso que cuando envías el mismo archivo, el valor va a ser el mismo, por la cual no vuelve a ejecutar el evento. La solución sería asignar a vacío al valor, así, el change identifica que el valor va a ser diferente a vacío cada vez que se ingrese al listener, y el código se vuelve a ejecutar:

const iptExcell = document.getElementById('excel-input')
let contador = 0

iptExcell.addEventListener('change', e => {
  e.preventDefault()
  contador += 1
  console.log(e) // aquí leo el valor
  console.log(`Hola ${contador}`)
  iptExcell.value = '' // y luego lo pongo vacío
})
<input title="ipt" id='excel-input' accept=".xlsx, .csv" type="file"/>

1
  • Ha caray que sencillo era pero bueno no lo sabía, muchas gracias @Cris223511.dev, ya lo arregle.
    – JoseMgz_Ux
    el 1 mar. a las 14:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.