CODEWITHSUNDEEP
javascriptjqueryhtmlajaxxmlhttprequest
Hrvoje Batrnek
Hrvoje Batrnek

Reputation: 565

Can we track individual file upload progress when uploading multiple files?

When multiple files are picked with <input type="file" multiple/> is it possible to track upload of every individual file, not just the total length of all files together, are browsers giving us this information? Is it possible to extract file objects from an input and create inputs for every file and upload them separately? I've tried that but input.files array is locked because of security reasons, but they could've given us the ability to manipulate individual files without giving us the ability to change the path or any other attribute.

I would rather like an answer that is not a link to some third-party library, I would like to learn and make it myself.

Upvotes: 2

Views: 1111

Answers (1)

Hikarunomemory
Hikarunomemory

Reputation: 4305

Basically, when I am dealing with <input type="file" multiple/>, I always storage files in another array for further works, such as deleting a specific file. 

var UploadFiles = [];

$('#input').on('change',function(){
    var files = this.files; // get files from input
    UploadFiles = files.slice(0) // storage files in UploadFiles array
})

Then, upload the files individually via AJAX

// initialize your progress bar
$.each(UploadFiles,function(){
    let uploadFile = new FormData()
    uploadFile.append('file', this)

    $.ajax({
        // some parameters...
        , beforeSend: function(){
              // some code...
              // setting progress bar percentage as you want
          }
        , success: function(){
              // some code...
              // setting progress bar percentage as you want
          }
    }).done(function(){
        // some code...
        // setting progress bar percentage as you want
    })
})
// setting progress bar to 100%

Upvotes: 2

Related Questions