Есть ли возможность показывать несколько индикаторов выполнения (по одному для каждого загружаемого файла) при загрузке в хранилище Firebase? - PullRequest
0 голосов
/ 08 мая 2019

Я пытаюсь загрузить несколько файлов в хранилище 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()
}

Я хотел бы получить отдельный прогресс для каждого загружаемого файла или хотя бы один индикатор выполнения для всех файлов вместе.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...