TransWikia.com

¿Cómo cambiar un texto del input con el nombre de la imagen seleccionada en React?

Stack Overflow en español Asked on December 16, 2021

Tengo una pregunta, soy un poco novato con React aún y estoy con un formulario de registro. Dicho formulario tiene lo típico, pero también tengo para seleccionar una foto de perfil, la cosa es que cuando se selecciona la foto me gustaría que apareciera el nombre de la foto seleccionada, pero no es así.

El diseño del input es uno que ofrecen los de Bootstrap que me gustó, pero no ofrece la función que comento:

<div className="custom-file">
   <input
     type="file"
     name="fotoPerfilRegistro"
     className="custom-file-input"
     id="customFileLang"
     accept="image/jpg, image/jpeg, image/png"
     lang="es"
     onChange={actualizarFotoPerfil}
     value={fotoPerfil}
     ></input>
   <label className="custom-file-label" htmlFor="customFileLang">
     Seleccionar Archivo
   </label>
</div>

Me gustaría que se cambiara la parte que dice "Seleccionar Archivo" por el nombre del archivo seleccionado.

One Answer

Puedes complementar la funcion actualizarFotoPerfil() para actualizar un valor en dicho label. Suponiendo que la variable se llame selectedName:

function actualizarFotoPerfil(e) {
    console.log(e.target.files[0]);
    this.selectedName = e.target.files[0].name;
}

Y Ajustar el HTML:

<label className="custom-file-label" htmlFor="customFileLang">
 {selectedName?selectedName:'Seleccionar Archivo'}
</label>

Answered by F.Igor on December 16, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP