Progress bar not working when autoProcessQueue is false

I'm using Dropzone.js to display image on my site.

It is working wonderfully, but there is one problem.

After I realized that Dropzone automatically sends image information without user pressing submit button, I set autoProcessQueue to false.

Now, it doesn't send the information automatically, but progress bar is broken as seen in the picture below.

There seems to be a white line on the image and it doesn't look good.

3 Answers

I had a similar problem with the progress bar. I'm using twitter-bootstrap and jQuery in my solution as well. This solution with the progress bar works fine for me (see element with id total-progress).

This is my template:

<!-- Upload preview template begin --> <div> <div> <div> <div> <span data-dz-name></span> </div> <br /> <div> <span data-dz-errormessage></span> </div> <br /> <!--<div data-dz-size></div>--> <img data-dz-thumbnail /> </div> <!--<div><span data-dz-uploadprogress></span></div>--> <!-- <div><span>?</span></div> --> <!-- <div><span>?</span></div> --> <div data-dz-remove title="Entfernen"><span aria-hidden="true"></span></div> <div aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"> <div data-dz-uploadprogress></div> </div> <!--<img src="removebutton.png" alt="Click me to remove the file." data-dz-remove />--> </div> </div> <!-- Upload preview template end --> 

And here is my Javascript code:

Dropzone.autoDiscover = false; var {{$name or 'upload'}} = new Dropzone("div#{{$name or 'upload'}}", { url: "{{ action("$controllerClass@store") }}" , method: "post" , paramName: "file" // The name that will be used to transfer the file , maxFilesize: {{$maxFilesize or str_replace('M','',ini_get('upload_max_filesize')) }} // MB , uploadMultiple: false , dictDefaultMessage: "{{$text or 'Ziehen Sie Dateien in diesen Bereich, um diese hochzuladen'}}" , previewTemplate: document.getElementById('preview-template').innerHTML //, acceptedFiles:'image/*' , previewsContainer: '#logoPreview' , thumbnailWidth: {{$thumbnailWidth or 100}} , thumbnailHeight: {{$thumbnailHeight or 100}} , sending: function (file, xhr, formData) { formData.append('_token', '{!!csrf_token() !!}'); } , success: function(file, responseText) { if(responseText != undefined) { if (responseText.success != undefined && responseText.success == "false") { $(file.previewElement).find('.dz-error-message').text("Fehler: " + responseText.errorMessage); $(file.previewElement).find('.dz-error-message').css('display','inline-block'); } else { $(file.previewElement).find('.dz-error-message').css('display','none'); } } $(file.previewElement).find('#total-progress').css('display','none'); } , error: function(file, message, xhr) { var header = "Error " + xhr.status + ": " + xhr.statusText; $(file.previewElement).find('.dz-error-message').text(header); $(file.previewElement).find('.dz-error-message').css('display','inline-block'); $(file.previewElement).find('#total-progress').css('display','none'); } , uploadProgress: function(progress) { document.querySelector("#total-progress .progress-bar").style.width = progress + "%"; } , completed: function(progress) { $(file.previewElement).find('#total-progress').css('display','none'); } , removedfile: function(file) { removeFile(file.name); $(file.previewElement).remove(); } }); 

You binded progress bar to wrong event. Replace uploadProgress by uploadprogress.

Doc is here:

This post may be old but I got easy answer. So I am posting here for anyone who needs help on this.

Remove autoProcessQueue: false and set url: "#". When you set the url: "#", then dropzone can't process automatically but autoProcessQueue: true (by default) will help to trigger animation

This way, it worked for me

Dropzone.options.dropzoneForm = { addRemoveLinks: true, url: "#", init: function () { } };