本文最初发表于 Rails Designer

在上一篇文章中，我探索了一种在使用 Stimulus 上传之前预览图像的方法。

我知道想要通过添加拖放来扩展其功能。在此过程中，我还使用 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.
中需要两行

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

  drop(event) {
    // …

    this.imagePreviewOutlet.show();

    // …
  }

  // …
}

现在，当您放置图像时，它会触发 image_preview_controller.js 上的 show() 函数。 ？

我喜欢使用像这样的小型 Stimulus 控制器，它们可以很好地协同工作。

Rails Designer 提供了这款 Stimulus 控制器，并添加了一些额外功能。立即获取副本。