mercredi 8 mai 2019

Is there any possibility to show multiple progress bars (one for each uploading file) when uploading to firebase storage?

I'm trying to upload few files to firebase storage and show separate progress bar for each uploading file, but I can't pass any currently uploading file if into progress() and complete() functions :-(

// 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()
}

I would like to get separate progress for each uploading file, or at least one progress bar for all files together.




Aucun commentaire:

Enregistrer un commentaire