CODEWITHSUNDEEP
javascriptjquerydropzone.js
Steve
Steve

Reputation: 394

dropzone: display current filename during upload

i want to display the current filename while uploading multiple files with dropzone.js with the following code:

dropzone.on("uploadprogress", function(file, parameter, bytes){

  //update progressbar, that works              
  $('#progress').css("width", parameter + "%").html(parseInt(parameter) + " %");     

  //prints the correct filenames
  console.log(file.name);

  //does not work: only last file.name in queue is shown, 
  //even in a real server environment where i upload many files
  $('#currentFile').html(file.name);         

});

html:

<div class="progress-bar" id="progress"/></div>              
<span id="currentFile"></span>

how is it done, that currentFile is really matching the current uploaded file? Thanks in advance.

Upvotes: 0

Views: 5561

Answers (1)

wallek876
wallek876

Reputation: 3269

Your code should work just fine, the only problem I see is that dropzone uploads the files simultaneously, what can make your display to switch between the different files really fast, because the uploadProgress event triggers independently for all the files being uploaded, and this can overlap with one and other, this can cause that you only see the data for the last file being upload.

The only solution I can think of is to make dropzone upload one file at a time, I am assuming you start the upload process manually, with autoProcessQueue set to false, here an example:

Dropzone.options.myDropzone = {
    url: 'yourUrl',
    autoProcessQueue: false,
    parallelUploads: 1,
    init: function() {
        var mydrop = this; // Closure

        // This is the event listener that triggers the start of the upload
        $('#yourSubmitButtonId').on('click', function(){
            mydrop.processQueue();
        });

        this.on('success', function(file){

            // Just to see default server response on console
            console.log(file.xhr.responseText);

            // Continue processing the queue if there are still files pending
            if (this.getQueuedFiles().length > 0) {
                this.processQueue();
            } else {
                console.log('Job done');
            }

        });

        this.on('uploadprogress', function(file, parameter, bytes){

          //update progressbar, that works              
          $('#progress').css("width", parameter + "%").html(parseInt(parameter) + " %");     

          //prints the correct filenames
          console.log(file.name);

          //does not work: only last file.name in queue is shown, 
          //even in a real server environment where i upload many files
          $('#currentFile').html(file.name);         

        });  
    }
};

Upvotes: 1

Related Questions