यह लेख मूल रूप से रेल्स डिज़ाइनर पर प्रकाशित हुआ था

पिछले लेख में मैंने स्टिमुलस के साथ अपलोड करने से पहले छवियों का पूर्वावलोकन करने का एक तरीका खोजा था।

मुझे पता है कि मैं ड्रैग एंड ड्रॉप जोड़कर इसकी कार्यक्षमता बढ़ाना चाहता हूं। साथ ही मैं दोनों कार्यात्मकताओं को एक साथ जोड़ने के लिए स्टिमुलस आउटलेट का भी उपयोग कर रहा हूं। छोटे स्टिमुलस नियंत्रकों के अधिक उन्नत उपयोग का प्रदर्शन।

मुझे लगता है कि आप पिछले उल्लेखित लेख के सभी चरणों का पालन कर चुके हैं।

चलो HTML से शुरू करते हैं। यह केवल कुछ विशेषताओं को जोड़कर अन्य HTML का उपयोग कर रहा है।

आइए dropzone_controller.js बनाएं।

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  static targets = ["input"];

  dragOver(event) {
    event.preventDefault();
  }

  dragLeave(event) {
    event.preventDefault();
  }

  drop(event) {
    event.preventDefault();

    this.#updateInputField(event.dataTransfer.files[0]);
  }
}

ये सभी विधियाँ इन क्रियाओं के लागू होने पर डिफ़ॉल्ट घटना को रोकती हैं। ड्रॉप() फ़ंक्शन निजी फ़ंक्शन को भी कॉल करता है। #updateInputField()। चलिए इसे जोड़ते हैं।

export default class extends Controller {
  // …

  // private
  #updateInputField(file) {
    const dataTransfer = new DataTransfer();

    dataTransfer.items.add(file);

    this.inputTarget.files = dataTransfer.files;
  }
  // …
}

यह गिराई गई छवि को inputTarget फ़ील्ड में इंजेक्ट करेगा। और ठीक इसी तरह आप छवियों को तत्व पर खींच और छोड़ सकते हैं। ?

आउटलेट्स के साथ छवियों का पूर्वावलोकन करें

हालांकि एक महत्वपूर्ण हिस्सा गायब है... छवि दिखाई नहीं दे रही है जो एक बग की तरह दिखती है। सौभाग्य से image_preview_controller.js पहले ही हो चुका है। यह एक सरल व्यायाम है।

सबसे पहले निम्नलिखित विशेषताओं को जोड़कर HTML में बदलाव करें:

जोड़ा गया:

• data-dropzone-image-preview-outlet='#image-preview';
• आईडी = "छवि-पूर्वावलोकन"।

अब dropzone_controller.js में दो पंक्तियों की आवश्यकता है।

export default class extends Controller {
  static outlets = ["image-preview"];
  // …

  drop(event) {
    // …

    this.imagePreviewOutlet.show();

    // …
  }

  // …
}

अब जब आप कोई छवि छोड़ते हैं तो यह image_preview_controller.js पर शो() फ़ंक्शन को सक्रिय करता है। ?

मैं इन जैसे छोटे स्टिमुलस नियंत्रकों का उपयोग करना पसंद करता हूं जो एक साथ बहुत अच्छा काम करते हैं।

रेल्स डिज़ाइनर के पास यह स्टिमुलस कंट्रोलर कुछ अतिरिक्त सुविधाओं के साथ पैक किया गया है। अपनी प्रति आज ही प्राप्त करें।