dropzone.js Suppress progress bar when retrieving from server

Question

Using dropzone.js, I've had no issues getting it to work, including retrieving images already previously uploaded to the server.

The only problem I have is when I retrieve those files from the server on a page refresh (meaning they weren't uploaded during this page's current usage), the upload progress bar is permanently displayed. Is there any way to suppress the progress bar for images previously uploaded? I would like to continue to use the progress bars when uploading and don't want to remove the css from the template.

Not that it's helpful in this case, but here is the code I'm using to retrieve the files and display them in a remote previews div.

Dropzone.options.myDropzone = {
    previewsContainer: document.getElementById("previews"),
    init: function() 
    {
    thisDropzone = this;

    $.get('../cgi/fileUpload.php', function(data) 
    {
        $.each(data, function(key,value)
        {
            var mockFile = { name: value.name, size: value.size};
            thisDropzone.options.addedfile.call(thisDropzone, mockFile);
            thisDropzone.options.thumbnail.call(thisDropzone, mockFile, value.uploaddir+value.name);

            var strippedName = (value.name).slice(11);
            fileList[i] = {"serverFileName" : value.name, "fileName" : value.name, "fileSize" : value.size, "fileId" : i };
            i++;


            var removeButton = Dropzone.createElement("<button class=\"btn btnremove\" style=\"width: 100%;\">Remove file</button>");

            var _this = this;

            removeButton.addEventListener("click", function(e) 
            {

                e.preventDefault();
                e.stopPropagation();

                thisDropzone.removeFile(mockFile);

            });

            mockFile.previewElement.appendChild(removeButton);

        });
    });
},
url: "../cgi/fileUpload.php"
};

Answer 1

Make sure that there is no progress bar, etc...

thisDropzone.emit("complete", mockFile);

FAQ Dropzone.JS

Answer 2

This is an old question but I had the same issue. My solution was to edit my .css file:

.dz-progress {
  /* progress bar covers file name */
  display: none !important;
}

Answer 3

Answered! Chose to just remove the divs using jquery after they were delivered:

$(".dz-progress").remove();

Not overly elegant, but it works.

Answer 4

I had same problem.

$('.dz-progress').hide();

It would be great if you use .hide() instead of .remove() method. Because .remove() remove that div permanent.