Dropzone

Question

में मौजूदा छवि फ़ाइलों को जोड़ें, मैं एक फॉर्म में छवि अपलोड कार्यक्षमता जोड़ने के लिए Dropzonejs का उपयोग कर रहा हूं, क्योंकि मेरे पास फॉर्म में कई अन्य फ़ील्ड हैं इसलिए मैंने autoProcessQueue से false पर सेट किया है और नीचे दिखाए गए फॉर्म के सबमिट बटन पर क्लिक करके इसे प्रोसेस कर रहा है ।

Dropzone.options.portfolioForm = { 

    url: "/user/portfolio/save", 
    previewsContainer: ".dropzone-previews", 
    uploadMultiple: true, 
    parallelUploads: 8, 
    autoProcessQueue: false, 
    autoDiscover: false, 
    addRemoveLinks: true, 
    maxFiles: 8, 

    init: function() { 

     var myDropzone = this; 
     this.element.querySelector("button[type=submit]").addEventListener("click", function(e) { 

      e.preventDefault(); 
      e.stopPropagation(); 
      myDropzone.processQueue(); 
     }); 
    } 
} 

यह ठीक काम करता है और फॉर्म सबमिट होने पर भेजी गई सभी छवियों को संसाधित करने की अनुमति देता है। हालांकि, मैं फिर भी फॉर्म को संपादित करते समय उपयोगकर्ता द्वारा पहले से अपलोड की गई छवियों को देखने में सक्षम होना चाहता हूं। तो मैं Dropzone विकी से निम्नलिखित पोस्ट के माध्यम से चला गया। https://github.com/enyo/dropzone/wiki/FAQ#how-to-show-files-already-stored-on-server

जो मौजूदा छवियों के साथ dropzone-preview क्षेत्र को पॉप्युलेट करता है लेकिन यह इस समय सबमिट किए गए फॉर्म के साथ मौजूदा छवियां नहीं भेजता है। मुझे लगता है कि ऐसा इसलिए है क्योंकि queue में थीस छवियों को जोड़ा नहीं गया है, लेकिन यदि ऐसा है तो सर्वर की ओर से अपडेट कैसे किया जा सकता है, यदि किसी मौजूदा छवि को उपयोगकर्ता द्वारा हटा दिया गया है?

इसके अलावा, बेहतर दृष्टिकोण क्या होगा, queue में पहले से ही जोड़े गए चित्र जोड़ें या हटाए गए फ़ाइल की जानकारी भेजें?

Answer 1

मैंने छवियों को दोबारा जोड़ने की कोशिश करने में थोडा समय बिताया, लेकिन थोड़ी देर के लिए इसके साथ लड़ने के बाद मैंने हटाए गए चित्रों के बारे में जानकारी सर्वर पर वापस भेज दी।

मौजूदा छवियों के साथ ड्रॉपज़ोन पॉप्युलेट करते समय मैं छवि के यूआरएल को mockFile ऑब्जेक्ट से जोड़ता हूं। हटाए गए ईवेंट में मैं फॉर्म में एक छिपी हुई इनपुट जोड़ता हूं यदि हटाई जा रही फ़ाइल एक प्रीपेप्टेड छवि है (यह जांच करके निर्धारित की जाती है कि घटना में पारित फ़ाइल में यूआरएल संपत्ति है या नहीं)।

Dropzone.options.imageDropzone = { 
    paramName: 'NewImages', 
    autoProcessQueue: false, 
    uploadMultiple: true, 
    parallelUploads: 100, 
    maxFiles: 100, 
    init: function() { 
     var myDropzone = this; 

     //Populate any existing thumbnails 
     if (thumbnailUrls) { 
      for (var i = 0; i < thumbnailUrls.length; i++) { 
       var mockFile = { 
        name: "myimage.jpg", 
        size: 12345, 
        type: 'image/jpeg', 
        status: Dropzone.ADDED, 
        url: thumbnailUrls[i] 
       }; 

       // Call the default addedfile event handler 
       myDropzone.emit("addedfile", mockFile); 

       // And optionally show the thumbnail of the file: 
       myDropzone.emit("thumbnail", mockFile, thumbnailUrls[i]); 

       myDropzone.files.push(mockFile); 
      } 
     } 

     this.on("removedfile", function (file) { 
      // Only files that have been programmatically added should 
      // have a url property. 
      if (file.url && file.url.trim().length > 0) { 
       $("<input type='hidden'>").attr({ 
        id: 'DeletedImageUrls', 
        name: 'DeletedImageUrls' 
       }).val(file.url).appendTo('#image-form'); 
      } 
     }); 
    } 
}); 

सर्वर कोड (एएसपी MVC नियंत्रक):

[HttpPost] 
[ValidateAntiForgeryToken] 
public ActionResult Edit(ViewModel viewModel) 
{ 
    if (ModelState.IsValid) 
    { 
     foreach (var url in viewModel.DeletedImageUrls) 
     { 
      // Code to remove the image 
     } 

     foreach (var image in viewModel.NewImages) 
     { 
      // Code to add the image 
     } 
    } 
} 

मुझे आशा है कि मदद करता है मैं नीचे प्रासंगिक कोड शामिल किया है।

Answer 2

अपलोड फ़ाइलों के क्लिक पर बस ड्रॉपज़ोन से फ़ाइलों को साफ़ करें। सभी फ़ाइलों को removeAllFiles() या विशिष्ट फ़ाइल का उपयोग करके साफ़ किया जा सकता है जिसे आप removeFile (fileName) का उपयोग कर हटा सकते हैं।

Answer 3

टेपिक के उत्तर पर विस्तार करने के लिए, मैंने पाया कि आपको पूर्वावलोकन पर प्रगति पट्टी को हटाने के लिए पूरी घटना को उत्सर्जित करने की आवश्यकता है।

var file = { 
    name: value.name, 
    size: value.size, 
    status: Dropzone.ADDED, 
    accepted: true 
}; 
myDropzone.emit("addedfile", file);         
myDropzone.emit("thumbnail", file, value.path); 
myDropzone.emit("complete", file); 
myDropzone.files.push(file); 

Answer 4

मूल रूप से मैं प्रोग्राम के रूप में एक पूर्व मौजूदा फाइल को अपलोड करने के लिए इस कर रहा था:

myDropzone.emit("addedfile", imageFile);         
myDropzone.emit("thumbnail", imageFile, imageUrl); 
myDropzone.files.push(file); 

हालांकि, इस Dropzone Github Issue संदर्भित मैं सीधे अपलोड करने के लिए एक आसान रास्ता मिल गया:

myDropzone.uploadFiles([imageFile]) 

दुर्भाग्य से अपलोडफाइल विधि Dropzone Documentation में कोई संदर्भ नहीं है, इसलिए मुझे लगा कि मैं चाहता हूं ड्रॉपज़ोन उपयोगकर्ताओं के साथ कुछ ज्ञान साझा करें।

आशा इस किसी

Answer 5

में मदद करता है बस dropzone स्रोत कोड https://github.com/enyo/dropzone/blob/4e20bd4c508179997b4b172eb66e927f9c0c8564/dist/dropzone.js#L978