Probablemente lo miré demasiado tiempo: el problema es similar a este . Agregué un detector de eventos a un botón, pero solo el método onclick dispara algo. Quiero mostrar el nombre del archivo seleccionado de una carga:
var ulButtons = document.getElementsByClassName("file-upload"); [...ulButtons].forEach(ulButton => { ulButton.addEventListener("click", function() { ulButton.value = null; console.log("this works") }) }); [...ulButtons].forEach(ulButton => { ulButton.addEventListener("change", function() { console.log("changed to:", this.value) }) }); <label for="{field.id_for_label}" class="file-upload btn btn-secondary">upload file</label> No veo por qué hacer clic en el botón de carga siempre se muestra en la consola, pero seleccionar un archivo no activa el changed to: ... .
Su código funcionaría si incluye un campo de entrada con el tipo de file .
var ulButtons = document.getElementsByClassName("file-upload"); [...ulButtons].forEach(ulButton => { ulButton.addEventListener("click", function() { ulButton.value = null; console.log("this works") }) }); [...ulButtons].forEach(ulButton => { ulButton.addEventListener("change", function() { console.log("changed to:", this.value) }) }); <label for="{field.id_for_label}" class="file-upload btn btn-secondary"> <input type="file">upload file</input></label>