I have a question about how to send one file at a time after the previous one is complete (I have a multiple input) but when sending send one at a time more (if the files are large send both at the same time and progress bar is wobbling from% to second because of being 2 or more the same time), I wanted to move to the next upload only after the first upload.
(function () {
var fileCatcher = document.getElementById('file-catcher');
var fileInput = document.getElementById('file-input');
var fileListDisplay = document.getElementById('file-list-display');
var fileList = [];
var renderFileList, sendFile;
fileCatcher.addEventListener('submit', function (evnt) {
evnt.preventDefault();
fileList.forEach(function (file,index) {//meti index aqui
sendFile(file,index);//meti index aqui
});
});
fileInput.addEventListener('change', function (evnt) {
fileList = [];
for (var i = 0; i < fileInput.files.length; i++) {
fileList.push(fileInput.files[i]);
}
renderFileList();
});
renderFileList = function () {
fileListDisplay.innerHTML = '';
fileList.forEach(function (file, index) {
var fileDisplayEl = document.createElement('p');
fileDisplayEl.innerHTML = (index + 1) + ': ' + file.name;
fileListDisplay.appendChild(fileDisplayEl);
$("#howmany").html(index + 1);
});
};
sendFile = function (file,index) {//meti o index aqui
var formData = new FormData();
var request = new XMLHttpRequest();
//console.log(file);
request.upload.addEventListener('progress',function(e){
var percent = Math.round(e.loaded/e.total * 100)
//document.querySelector('#progress').innerHTML = Math.round(e.loaded/e.total * 100) + '%';
$('.progress-bar').width(percent + '%')
$('.progress-bar').html('<div id="progress-status">'+percent+'%- '+ $('#donee').html() + ' de ' + $('#howmany').html() +' Completos</div>')
$('#percenttt').html(percent);
},false)
formData.set('file', file);
request.open("POST", 'https://1fiafqj.oloadcdn.net/uls/LUeG8UDnFMyzix84');
request.send(formData);
request.onreadystatechange = function() {
if(request.readyState == 4 && request.status == 200)
{
$("#donee").html(index + 1);
//console.log(http.responseText);
//$('#logs').text(request.responseText);
console.log(JSON.parse(request.responseText));//imprime em Json
$(".progress-bar").addClass("progress-bar-success");
$(".progress-bar").removeClass("active");
$(".progress-bar").html('<div id="progress-status">'+ $('#percenttt').html() +'% - '+ $('#donee').html() + ' de ' + $('#howmany').html() +' Completos</div>');
//console.log($('.progress-bar').width());
}
}
};
})();