تم نشر هذه المقالة في الأصل على موقع Rails Designer

في مقال سابق، استكشفت طريقة لمعاينة الصور قبل تحميلها باستخدام Stimulus.

أعلم أنني أريد توسيع وظائفه عن طريق إضافة السحب والإفلات. على طول الطريق، أستخدم أيضًا منافذ التحفيز لربط الوظيفتين معًا. عرض الاستخدام الأكثر تقدمًا لوحدات تحكم التحفيز الصغيرة.

أفترض أنك اتبعت جميع خطوات المقالة المذكورة السابقة.

لنبدأ بـ 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]);
  }
}

كل ما تفعله هذه الطرق هو منع الحدث الافتراضي عند استدعاء هذه الإجراءات. تقوم الدالة drop() أيضًا باستدعاء الوظيفة الخاصة this.#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();

    // …
  }

  // …
}

الآن عندما تقوم بإسقاط صورة، يتم تشغيل وظيفة show() على image_preview_controller.js. ?

أحب استخدام وحدات تحكم التحفيز الصغيرة مثل تلك التي تعمل معًا بشكل رائع.

يحتوي Rails Designer على وحدة تحكم التحفيز هذه مع إضافة بعض الإضافات. احصل على نسختك اليوم.