<html> <head> </head> <body> <form action="" enctype="multipart/form-data" method="post"> <input type="file" name="pic" accept="image/*" id="insert-file" class="ins=file"> <input type="submit" id="submit-btn" class="submit-btn"> <button id="add-img" type="button">ADD ANOTHER IMAGE</button> <div id="new-field"></div> <script src="{{ url_for('static', filename='upload.js') }}"></script> </form> </body> </html>Esta es mi plantilla y la siguiente es upload.js
const addImg = document.getElementById('add-img') const newField = document.getElementById('new-field') addImg.addEventListener('click', function() { newField.innerHTML += ` <input type="file" name="pic" accept="image/*" class="ins=file"> <input type="submit" class="submit-btn"> ` })Como puede ver, se creará un nuevo campo de entrada cuando un usuario haga clic en el botón AÑADIR OTRA IMAGEN, pero la imagen seleccionada en ese campo de entrada desaparecerá cuando se haga clic en el botón y mostrará "No se eligió ningún archivo" a pesar del usuario. seleccionando un archivo antes de hacer clic en AÑADIR OTRA IMAGEN. Sospecho que es porque me estoy deshaciendo del valor del campo de entrada al crear uno nuevo con el botón AGREGAR OTRA IMAGEN. (está ahí en el código JS)
De todos modos, ¿cómo puedo solucionar esto? Quiero que el usuario pueda hacer clic en el botón AGREGAR OTRA IMAGEN y que el campo de entrada aún contenga el archivo que seleccionó anteriormente.
usar .innerHTML += es convertir lo que está actualmente en el dom en una cadena, luego volver a colocarlo en el dom, lo que hace que se convierta en un nuevo elemento.
use insertAdjacentHTML para insertar una cadena de html en el dom para mantener los elementos existentes mdn docs
addImg.addEventListener('click', function() { newField.insertAdjacentHTML('beforeend',` <input type="file" name="pic" accept="image/*" class="ins=file"> <input type="submit" class="submit-btn"> `) })