Search code examples
jqueryajaxdropzone.js

Dropzone.js proccess file after upload and monitor progress


Title says it all, I need to monitor data processing progress. For example I doing some chunked inserts to MySQL and echo'ing progress after every chunk, how to print progress in front-end? I'm using Dropzone.js and my current JS code is (simplify version):

Dropzone.options.importdropzone = {

                init: function() {

                    // I need something like
                    this.on("backendProccessing",function(response){
                      return response
                    })

                    this.on("success", function(file, response) {
                        // Success only return after backend finish process
                    })

                }
            };

Also tried (doesn't work, nothing returned, only success):

this.on('xhr',function(){

  // get the native XmlHttpRequest object
  var xhr = $.ajaxSettings.xhr() ;
  // set the onprogress event handler
  xhr.onprogress = function(evt){ console.log('Doing') } ;
  // set the onload event handler
  xhr.onload = function(){ console.log('DONE!') } ;
  // return the customized object
  return xhr ;

});

So I need something like this:

this.on("backendProccessing",function(response){
  return response
})

Solution

  • Well it's seams that not realy possible, i need to change backend a little bit. So I created another method in backend wich monitors current progress, progress is set bu session so I need 2 AJAX cals, 1 for upload ant start proccessing file and another to check status.

    For excample proccessing URL is http://example.com/import For status check http://example.com/import/status

    I can check status till it return specific value, like

    {
      "status":"done"
    }
    

    I calling check status funcion every 1 second in

    this.on('sending',function() {
      // calling another ajax here every x sec.
    }