addRemoveLinks funktioniert nicht auf meiner Dropzone

Question

Ich habe die Dokumentation angeschaut und habe mehrere Methoden online versucht, aber die addRemoveLinks Methode funktioniert nicht. Es zeigt "Remove File" an, ist aber nicht anklickbar und löst keine Fehlermeldungen in der Javascript-Konsole aus. Die Ansicht stammt von einem .NET MVC 4-Projekt und unabhängig davon, wie ich meine Dropzone eingerichtet habe, kann ich nicht den gewünschten Effekt erzielen. Das Hochladen der Datei funktioniert, aber ich möchte, dass der Benutzer die Miniaturansicht/Vorschau nach dem Hochladen aus der Dropzone entfernen kann, oder falls der Upload fehlschlägt.

<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

Nach dem "addRemoveLinks: true," Zeile hinzufügen in:

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