Seret & Lepas Imej dengan Pratonton menggunakan Outlet Rangsangan

Artikel ini pada asalnya diterbitkan di Rails Designer

---

Dalam artikel sebelumnya saya meneroka cara untuk melihat imej sebelum memuat naik dengan Rangsangan.

Saya tahu mahu melanjutkan fungsinya dengan menambahkan seret & lepas. Sepanjang perjalanan saya juga menggunakan saluran Stimulus untuk mengikat kedua-dua fungsi bersama-sama. Mempamerkan penggunaan lebih maju bagi pengawal Rangsangan kecil.

Saya menganggap anda telah melalui semua langkah artikel yang disebut sebelum ini.

Mari kita mulakan dengan HTML. Ia menggunakan HTML lain dengan hanya menambah beberapa atribut.

<div data-controller="image-preview dropzone" data-action="dragover->dropzone#dragOver dragleave->dropzone#dragLeave drop->dropzone#drop">
  <img data-image-preview-target="canvas" hidden class="object-cover size-48">

  <input type="file" accept="image/*" data-image-preview-target="source" data-dropzone-target="input" data-action="image-preview#show" hidden>
</div>

Mari kita cipta 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]);
  }
}

Semua kaedah ini adalah menghalang peristiwa lalai apabila tindakan ini digunakan. Fungsi drop() juga memanggil fungsi peribadi ini.#updateInputField(). Jom tambah.

export default class extends Controller {
  // …

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

    dataTransfer.items.add(file);

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

Ini akan menyuntik imej yang digugurkan ke dalam medan inputTarget. Dan seperti itu anda boleh menyeret dan melepaskan imej ke elemen. ?

Pratonton imej dengan cawangan

Ada bahagian penting yang hilang walaupun... imej tidak ditunjukkan yang kelihatan seperti pepijat. Nasib baik dengan image_preview_controller.js sudah selesai. Ini adalah latihan mudah.

Mula-mula tweak HTML dengan menambahkan atribut berikut:

<div data-controller="image-preview dropzone" data-dropzone-image-preview-outlet="#image-preview" data-action="dragover->dropzone#dragOver dragleave->dropzone#dragLeave drop->dropzone#drop" id="image-preview>
  <img data-image-preview-target="canvas" hidden class="object-cover size-48">

  <input type="file" accept="image/*" data-image-preview-target="source" data-dropzone-target="input" data-action="image-preview#show" hidden>
</div>

Ditambah:

• data-dropzone-image-preview-outlet="#image-preview";
• id="image-preview".

Kini dua baris diperlukan dalam dropzone_controller.js.

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

  drop(event) {
    // …

    this.imagePreviewOutlet.show();

    // …
  }

  // …
}

Kini apabila anda menggugurkan imej ia menyalakan fungsi show() pada image_preview_controller.js. ?

Saya suka menggunakan pengawal Rangsangan kecil seperti ini yang berfungsi dengan baik bersama-sama.

---

Rails Designer mempunyai pengawal Rangsangan ini dibungkus dengan beberapa tambahan tambahan. Dapatkan salinan anda hari ini.

Atas ialah kandungan terperinci Seret & Lepas Imej dengan Pratonton menggunakan Outlet Rangsangan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!