使用 Stimulus Outlets 拖放影像並進行預覽

本文原刊於 Rails Designer

---

在上一篇文章中，我探索了一種在使用 Stimulus 上傳之前預覽圖像的方法。

我知道想透過添加拖放來擴展其功能。在此過程中，我還使用 Stimulus 插座將這兩種功能結合在一起。展示小型 Stimulus 控制器的更高級用法。

我假設您已經完成了前面提到的文章的所有步驟。

讓我們從 HTML 開始。它使用其他 HTML，僅添加了一些屬性。

<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>

讓我們建立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：

<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>

新增：

• data-dropzone-image-preview-outlet="#image-preview";
• id="圖像預覽"。

現在 dropzone_controller.js.
中需要兩行

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

  drop(event) {
    // …

    this.imagePreviewOutlet.show();

    // …
  }

  // …
}

現在，當您放置圖像時，它會觸發 image_preview_controller.js 上的 show() 函數。 ？

我喜歡使用像這樣的小型 Stimulus 控制器，它們可以很好地協同工作。

---

Rails Designer 提供了這款 Stimulus 控制器，並增加了一些額外功能。立即取得副本。

以上是使用 Stimulus Outlets 拖放影像並進行預覽的詳細內容。更多資訊請關注PHP中文網其他相關文章！