2014-06-16 8 views
6

Dropzonejs में मैं बटन हटाना बनाने रहा हूँ और उसके बाद थंबनेल करने के लिए इसे जोड़कर साथ यूआरएल को नष्ट लिंक करने के लिए, मैं कैसे यूआरएल जो मैं सीधे सर्वर से geeting हूँ addRemoveLinks:true का उपयोग करके बटन को हटाने के लिए लिंक कर सकते हैं,dropzone js निकालें बटन

//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); 
     }); 
+0

साथ काम करता है आप कभी भी यह पता लगा था मदद करता है? मैं एक ही चीज़ पर काम कर रहा हूं ... – cjn

+1

@cjn हाँ मैंने लिंक लिंक हटा दिया है। कोड के लिए उत्तर की जांच करें। – anam

उत्तर

5

आप हटाए गए लिंक को जोड़ सकते हैं .. जोड़ा गया फ़ाइल इवेंट में, आप सर्वर प्रतिक्रिया में यूआरएल प्राप्त कर सकते हैं और इसे हटाए गए लिंक में सेट कर सकते हैं।

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); 
}); 
1

जोड़े

addRemoveLinks: true, 

तो अंदर

init: function() {} 

निम्न का उपयोग कर आप पर क्लिक करते हैं dz-हटाने यह जाता है कि उसे अपने जनक है तो अवधि तत्व के पाठ के लिए लग रहा है, जहां चित्र आईडी है।

$ AJAX का उपयोग करके आप उस छवि को भेजें अपनी क्रिया में करें और जो भी आप चाहते हैं उसे करें। नोट: मैं उपयोगकर्ता सूचनाओं के लिए यहां टोस्टर का उपयोग कर रहा हूं।

$(".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); 
      } 
    }) 

}); 

आशा यह आप :)

3

भाई इस 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> 
संबंधित मुद्दे