Dropzone.js Disable progress bar when retrieving from server

Question

Using dropzone.js, I had no problems with its operation, including obtaining images previously uploaded to the server.

The only problem I encounter is when I retrieve these files from the server to refresh the page (which means that they were not downloaded during the current use of this page), a progress bar is constantly showing. Is there a way to suppress the progress bar of previously uploaded images? I would like to continue to use progress bars at boot and don't want to remove css from the template.

Not that it was useful in this case, but here is the code that I use to extract the files and display them in a remote div 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

Answered! Choose to simply remove divs with jquery after they have been delivered:

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

Not too elegant, but it works.

Answer 2

Make sure there is no progress bar, etc.

 thisDropzone.emit("complete", mockFile); 

FAQ Dropzone.JS

Answer 3

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

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

Answer 4

I had the same problem.

$ ("dg-progress.) Hide () ;.

It would be great if you use .hide () instead of the .remove () method. Because .remove () remove this div constant.

Answer 5

Try it worked for me $ ("Pinwheel"). Hide ().

Answer 6

You can try it 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 (eg 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 },