tengo el siguiente código tracking_upload_csv.html
<html>
...
<body class="container">
<h1>Aquamype - Subir datos</h1>
<div class="mb-2 mt-4">
<div class="row">
<div class="col-md-8">
<form>
{% csrf_token %}
<div>
<!-- upload file-->
<div class="mb-2">
<label class="form-label">Configure sus campos antes de subir.</label>
<input name="file-upload" id="file-to-upload" type="file" class="form-control" />
</div>
<button name="subir" id="but-upload-file" type="submit" class="btn btn-success" onclick="this.disabled=true;">Subir</button>
<div id="spinner" style="display: none;" class="spinner-border text-success" role="status">
<span class="visually-hidden">Cargando...</span>
</div>
</div>
</form>
</div>
</div>
</div>
<div id='my-modal' class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Mensaje</h5>
<button id="but-cerrar-2" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p id="modal-message">Se cargó correctamente la data</p>
</div>
<div class="modal-footer">
<button type="button" id="but-cerrar" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
<script src="tracking/tracking_upload_csv.js"></script>
</body>
</html>
El cual me carga lo siguiente:
Aquí esta el archivo tracking_upload_csv.js
var modal = new bootstrap.Modal(document.getElementById('my-modal'),
{
keyboard : true
}
);
var showModal = (message) => {
document.getElementById('modal-message').innerHTML = message;
modal.toggle();
}
function postData (formData, csrftoken) {
...
}
var onUpload = (event) => {
const file = document.querySelector('#file-to-upload').files[0];
let formData = new FormData();
formData.append('file', file);
let csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
event.preventDefault();
postData(formData, csrftoken)
//que se desbloquee el boton
//que se limpie el input file
}
var onCerrar = (event) => {
const button = document.querySelector('#but-upload-file')
button.disabled = false;
document.getElementById("file-to-upload").value = "";
event.preventDefault();
}
var main = () => {
document.querySelector('#but-upload-file')
.addEventListener('click', onUpload);
document.querySelector('#but-cerrar')
.addEventListener('click', onCerrar);
document.querySelector('#but-cerrar-2')
.addEventListener('click', onCerrar);
}
window.addEventListener('load', main);
En fin, lo que ocurre al darle al botón subir es que carga la pantalla y me sale el pop up que confirma que se subieron los datos, mientras que el botón se bloquea, de tal modo que no se pueda presionar mas veces casualmente. La cosa es que después de que carguen los datos, el input file se limpie y el botón se desbloquee, por lo que intente hacer que después de hacer click en el botón cerrar del pop up, se active dicha función, pero no funciona; también intente ejecutar las funciones después de que ocurriese la subida, pero nada. No se me ocurre que mas hacer para solucionarlo, o no se si estoy haciendo algo mal.