AddRemoveLinks not working on my Dropzone

Question

I looked through the documentation and tried several methods on the Internet, but the addRemoveLinks method does not work. It displays "Delete file" but has no clicks and does not display error messages in the Javascript console. A look from the .NET MVC 4 project and no matter how I set up my Dropzone, I cannot achieve the desired effect. Uploading files works, but I would like the user to be able to remove the thumbnail / preview from Dropzone after downloading it or if the download fails.

<div class="jumbotron" style="margin-top: 4%"> <div class="dropzone" id="dropzoneForm"> <div class="fallback"> <input name="file" type="file" multiple /> <input type="submit" value="Upload" /> </div> </div> </div> <style type="text/css"> #dropzoneForm { background: #F0F0F0; border: 3px dotted #666; border-radius: 10px; width: 300px auto; height: 150px auto; padding-top: 35px; font-size: 14px; color: blue; vertical-align: middle; text-align: center; } .dz-file-preview { margin-top: -100px; } .dz-filename { font-size: 10px; color: blue; padding: 20px; margin-left: -25px; margin-bottom: 25px; word-wrap: normal; } .dz-processing { width: 400px; } </style> <script> Dropzone.options.dropzoneForm = { url: '@Url.Action("SaveUploadedFile", "Workflow")' + "?workflowInstanceID=" + '@Model.WorkflowInstanceID' + "&workflowID=" + '@Model.WorkflowID', paramName: "files", fileSizeBase: 1024, parallelUploads: 1, maxFiles: 25, maxFilesize: 10000, acceptedFiles: ".pdf, .bmp, .png, .jpg, .jpeg, .tiff, .gif, .png, .doc, .docx, .rtf, .xlsx, .xls, .doc, .docx, .txt, .3gp, .aac, .m4a, .mp3, .wav, .wma, .mp4, .avi, .mov, .3g2, .m4v, .mkv, .mpg, .m2v, .flac", createImageThumbnails: true, addRemoveLinks: true, dictDefaultMessage: "Drop File(s) Here or Click to Upload", queuecomplete: function () { }, init: function () { this.on("addedfile", function (file) { // Capture the Dropzone instance as closure. var _this = this; // Create the remove button var removeButton = Dropzone.createElement("<button data-dz-remove " + "class='del_thumbnail btn btn-default'><span class='glyphicon glyphicon-trash'></span></button>"); // Listen to the click event removeButton.addEventListener("click", function (e) { // Make sure the button click doesn't submit the form: e.preventDefault(); e.stopPropagation(); // Remove the file preview. _this.removeFile(file); // If you want to the delete the file on the server as well, // you can do the AJAX request here. }); // Add the button to the file preview element. file.previewElement.appendChild(removeButton); }); this.on("complete", function (data) { var res = JSON.parse(data.xhr.responseText); if (this.getQueuedFiles().length == 0) { alert("File(s) were uploaded successfully."); $("#Grid").data("kendoGrid").dataSource.read(); //for Chrome } }); } }; 

Answer 1

After the line addRemoveLinks: true, will add:

 removedfile: function (file) { var _ref; return (_ref = file.previewElement) != null ? ref.parentNode.removeChild(file.previewElement) : void 0; },