Dropzone js URL verknüpfen löscht mit Schaltfläche Entfernen

Question

In Dropzonejs i-Taste löscht erschaffe und dann zu Thumbnails anhängen, wie kann ich URL-Link, die ich direkt vom Server am geeting Schaltfläche zu entfernen, indem addRemoveLinks:true Verwendung

//Write function if you need to add some event after files added 
     myDropzone.on("addedfile", function(file) { 
     console.log('Files Added using ---------->'+$attrs.apiCall); 
     var _this=this; 
     /* Maybe display some more file information on your page */ 
     var removeButton = Dropzone.createElement("<button data-dz-remove>-Remove file</button>"); 
     removeButton.addEventListener("click", function(e) { 
     e.preventDefault(); 
     e.stopPropagation(); 
     _this.removeFile(file); 
     }); 
     file.previewElement.appendChild(removeButton); 
     }); 

Answer 1

Sie können löschen Link hinzufügen .. in Hinzugefügt Dateiereignis, können Sie URL in Server Antwort und setzen Sie es in löschen Link.

myDropzone.on("addedfile", function (file) { 
    var _this = this; 

    /* Maybe display some more file information on your page */ 
     var removeButton = Dropzone.createElement("<button data-dz-remove " + 
         "class='del_thumbnail btn btn-default'><span class='glyphicon glyphicon-trash'></span></button>"); 

     removeButton.addEventListener("click", function (e) { 
     e.preventDefault(); 
     e.stopPropagation(); 
     var server_file = $(file.previewTemplate).children('.server_file').text(); 
     // Do a post request and pass this path and use server-side language to delete the file 
     //   $.post(server_file,{'X-CSRFToken': $cookies.csrftoken}, 'json'); 
     $http({ 
      method: 'POSt', 
      url: server_file, 
      headers: { 
        'X-CSRFToken': $cookies.csrftoken 
      } 
     }); 
     _this.removeFile(file); 
     }); 
     file.previewElement.appendChild(removeButton); 
}); 

Answer 2

hinzufügen

addRemoveLinks: true, 

dann die folgende Verwendung innerhalb

init: function() {} 

Wenn Sie auf klicken dz entfernende es geht, um es Eltern sucht dann nach dem Text des span-Element, wo die Bild-ID ist.

Mit $ ajax senden Sie diese ImageId an Ihre Aktion und tun, was Sie wollen. Hinweis: Ich verwende toastr hier für Benutzerbenachrichtigungen.

$(".dz-remove").on("click", function (e) { 
    e.preventDefault(); 
    e.stopPropagation(); 

    var imageId = $(this).parent().find(".dz-filename > span").text(); 

    $.ajax({ 
    url: "Your url here", 
    data: { imageId: imageId}, 
    type: 'POST', 
    success: function (data) { 
      if (data.NotificationType === "Error") { 
       toastr.error(data.Message); 
      } else { 
       toastr.success(data.Message);       
      }}, 
      error: function (data) { 
       toastr.error(data.Message); 
      } 
    }) 

}); 

this helps you :)

Answer 3

bro Dies funktioniert mit Dropzone 5.0.0

<script> 
    Dropzone.options.dropzoneForm = { 
     addRemoveLinks: true, 
     dictDefaultMessage: "<strong>Drop files here or click to upload. </strong>", 
     init: function() { 
      this.on("complete", function(file) { 
       $(".dz-remove").html("<div><span class='fa fa-trash text-danger' style='font-size: 1.5em'></span></div>"); 
      }); 
     } 
    }; 
</script>