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

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

ドラッグ アンド ドロップを追加して機能を拡張したいと考えています。その過程で、2 つの機能を結び付けるために Stimulus アウトレットも使用しています。小型の 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";
• 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 コントローラーがいくつか追加されてパッケージ化されています。今すぐコピーを入手してください。