刺激アウトレットを使用したプレビュー付き画像のドラッグ アンド ドロップ

この記事は元々 Rails Designer で公開されたものです

---

前の記事では、Stimulus を使用してアップロードする前に画像をプレビューする方法を検討しました。

ドラッグ アンド ドロップを追加して機能を拡張したいと考えています。その過程で、2 つの機能を結び付けるために 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.
に 2 行が必要になります。

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

  drop(event) {
    // …

    this.imagePreviewOutlet.show();

    // …
  }

  // …
}

画像をドロップすると、image_preview_controller.js で show() 関数が起動されます。 ?

私は、このような小型の刺激コントローラーを使用するのが好きで、組み合わせて使用​​すると効果的です。

---

Rails Designer には、この Stimulus コントローラーがいくつか追加されてパッケージ化されています。今すぐコピーを入手してください。

以上が刺激アウトレットを使用したプレビュー付き画像のドラッグ アンド ドロップの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。