0

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.

1 respuesta 1

0

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>

Tu Respuesta

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

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