I am trying to download files using Ajax and show a custom download progress bar.
The problem is I can't understand how to do so. I wrote the code to log the progress but don't know how to initiate the download.
NOTE: The files are of different types.
Thanks in advance.
JS
// Downloading of files
filelist.on('click', '.download_link', function(e){
e.preventDefault();
var id = $(this).data('id');
$(this).parent().addClass(download_start);
$.ajax({
xhr: function () {
var xhr = new window.XMLHttpRequest();
// Handle Download Progress
xhr.addEventListener(progress, function (evt) {
if(evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
console.log(percentComplete);
}
}, false);
return xhr;
},
complete: function () {
console.log(Request finished);
}
})
});
HTML and PHP
<li>
<div class=f_icon><img src=' . $ico_path . '></div>
<div class=left_wing>
<div class=progressbar></div>
<a class=download_link href=# id='.$file_id.'><div class=f_name>' . $full_file_name . '</div></a>
<div class=f_time_size>' . date(M d, Y, $file_upload_time) . ' • ' . human_filesize($file_size) . '</div>
</div>
<div class=right_wing>
<div class=f_delete>
<a class=btn btn-danger href=# aria-label=Delete data-id='.$file_id.' data-filename='.$full_file_name.'><i class=fa fa-trash-o fa-lg aria-hidden=true title=Delete this?></i>
</a>
</div>
</div>
</li>