addRemoveLinks non funziona sul mio Dropzone

Question

Ho esaminato la documentazione e ho provato diversi metodi online ma il metodo addRemoveLinks non funziona. Visualizza "Rimuovi file" ma non è selezionabile e non genera messaggi di errore nella console di Javascript. La vista proviene da un progetto .NET MVC 4 e, indipendentemente da come ho configurato il mio Dropzone, non sono in grado di ottenere l'effetto desiderato. Il caricamento dei file funziona ma vorrei che l'utente avesse la possibilità di rimuovere la miniatura/anteprima da Dropzone dopo il caricamento, o nel caso in cui il caricamento fallisse.

<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

Dopo le "addRemoveLinks: true," linea aggiungere in:

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