Edited at

Modal indicating downloading


What did I want to do?


downloading.gif



  1. Click the button

  2. Show the modal indicating downloading

  3. Close the modal when it's done



Step.3 is not easy



I found 2 ways




How do you implement?



I used blob() method in JS

const downloadZip = () => {

modal.style.display = "block"
fetch(document.URL + "download", {
method: 'POST',
headers: { "Content-Type": "application/x-www-form-urlencoded; charset=utf-8" },
body: "company=" + inputCompany.value + "&president=" + inputPresident.value
})
.then(response => response.blob())
.then(blob => {
var url = window.URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.download = "antisocial-capture.zip";
document.body.appendChild(a);
a.click();
a.remove();
modal.style.display = "none"
});
}



Thank you