tllewellyn tllewellyn - 2 months ago 24
Javascript Question

dropzone.js Suppress progress bar when retrieving from server

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

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

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

Not overly elegant, but it works.