Search code examples
jqueryuploadfine-uploader

fineuploader with overall progressbar

I'm using fineuploader to upload photos to my website. I can get and update progress for each file with, 

.on('progress', function (event, id, filename, uploadedBytes, totalBytes)

but how can I get the overall progress?

Solution

  • After looking at the docs (very briefly) it doesn't look like there's a surefire way of doing that. My suggestion would be to count the total amount of selected files and after each file successfully uploads, move a progress bar X%.

    <div class="tot_progress" style="width:500px;">
    <div class="bar" style="width:0; color:green;"></div>
</div>

.on('submitted', function(event, id, filename) {
    filesToUpload++;
})
.on('complete', function(event, id, fileName, responseJSON) {                            
    uploadedFiles++;
    prog_width = Math.floor(100/filesToUpload)*uploadedFiles;
    $('.bar').css('width',prog_width+'%');
})

    For example, let's say we had 4 files to upload. After the first file completes the progress bar would show 25%, when the second file completes the bar would show 50%... You could animate the width which would make it look prettier.