Я пытаюсь загрузить несколько файлов в хранилище firebase и показать отдельные индикаторы выполнения для каждого загружаемого файла, но я не могу передать ни один загружаемый в данный момент файл, если он используется в функциях progress () и complete (): - (
// DIV container for progress bars
const divProgressBarContainer = $('#divProgressBarContainer')
// File upload form input
const fileUpload = $('#fileUpload')
// Starting upload
fileUpload.on('change', function(e){
// Get File
const files = e.target.files
// Bars array
var bars = []
for (var i = 0, f; (f = files[i]); i++) {
// Adding some progress bars objects
bars.push({
progressBarId : 'progress_' + i,
progressBarText : beautifyFileName(f.name) + ' — 0%'
})
// Create a storage ref
var storageRef = firebase.storage().ref('json/' + f.name)
// Upload file
var task = storageRef.put(f)
// Update progress bar on changes
task.on('state_changed', function progress(snapshot){
let percentage = snapshot.bytesTransferred /
snapshot.totalBytes * 100
let name = beautifyFileName(snapshot.ref.name)
let id = '#progress_' + i
// Bootstrap 4 progress bar
$(id).width(percentage + '%')
$(id).html(name + ' — ' + percentage + '%')
},
function error(err){},
function complete(){}
)
}
// Adding progress bars to HTML
divProgressBarContainer.append(`${
bars.map((bar) =>
`<div class="progress mb-3"><div class="progress-bar progress-
bar-striped progress-bar-animated" role="progressbar" aria-
valuenow="0" aria-valuemin="0" aria-valuemax="100"
style="width: 0%"
id="${bar.progressBarId}">${bar.progressBarText}</div></div>`
).join('')
} `
)
})
// Extracting file name and UPPERCASE it
function beautifyFileName(string){
return string.split('.').slice(0, -1).join('.').toUpperCase()
}
Я хотел бы получить отдельный прогресс для каждого загружаемого файла или хотя бы один индикатор выполнения для всех файлов вместе.