0

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: introducir la descripción de la imagen aquí

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.

1 respuesta 1

0

no he revisado a fondo tu codigo pero si quieres limpiar y habilitar ahi eh puesto las lineas de codigo espero te ayude.

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
    document.getElementById("but-upload-file").removeAttribute("disabled");
        
    //que se limpie el input file
    document.getElementById("file-to-upload").value = "";
}

Saludos

4
  • nada mano, no me funcionó
    – Juan
    Commented el 15 nov. 2021 a las 22:05
  • Hola Juan, revisa esta parte: let csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value; event.preventDefault(); postData(formData, csrftoken) porque yo la he comentado en mi prueba y si funciona todo. Commented el 16 nov. 2021 a las 16:27
  • esa es la cosa, no puedo comentar esas lineas
    – Juan
    Commented el 16 nov. 2021 a las 17:20
  • Hola, no se ve por ninguna parte ese name = csrfmiddlewaretoken seria mejor que lo añadieras al codigo que has pasado y le pusieras un id para poder jalarlo con el id. Commented el 19 nov. 2021 a las 14:38

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.