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"
};

Airsickness

if they are already uploaded shouldn't the refresh retrieve them from the server? – Triglyph

Yes, I would like them to be retrieved without the progress bar though. – Airsickness

Answer 1

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

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

Not overly elegant, but it works.

Airsickness

yes, or you could use $('.dz-preview').addClass('dz-complete'); – Triglyph

Answer 2

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

thisDropzone.emit("complete", mockFile);

FAQ Dropzone.JS

Interlocutor

Answer 3

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;
}

Orometer

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.

Bricebriceno

Yes. It is resolved using $('.dz-progress').hide(); @Panther – Bricebriceno

Answer 5

Try this worked for me $(".spinner").hide();

Hexamerous

Answer 6

you can try this and work

init: function() {
            this.on("maxfilesexceeded", function(file) {
                this.removeAllFiles();
                this.addFile(file);
            });
            this.on("addedfile", function(file) {
                console.log("Added file.");
                $(this.previewsContainer).closest('.crm-upload-wrap').find('.badge').html(this.files.length);
                console.log(this);
                console.log(file);
            });
            var mockFile = { name: "myimage.jpg", size: 1235, type: "image/jpeg", serverId: 151987, accepted: true }; // use actual id server uses to identify the file (e.g. DB unique identifier)
            this.emit("addedfile", mockFile);
            this.options.thumbnail.call(this, mockFile, 'https://lh3.googleusercontent.com/40gtienq1vthvuWpzCErQJqucB6oxANPHawkEiF6BEJH0Q7mJwHuOyUeRwMBIGb8vO8=s128');
            this.emit("success", mockFile);
            this.emit("complete", mockFile);
            this.files.push(mockFile);
            $(this.previewsContainer).closest('.crm-upload-wrap').find('.badge').html(this.files.length);
            
            
            $(this.previewsContainer).find('.dz-progress').hide(); //<-- okkk
},

Kahle

Answer 7

If you have any class with "spinner", this will hide all of those elements. There is a "dz-preview" class for the div element that displays the progress. As mentioned in other responses, you can either augment the existing class to trick Dropzone into thinking the upload completed or you can purge the element with class "dz-preview".

Seduction