Эта статья изначально была опубликована в 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();

    // …
  }

  // …
}

Теперь, когда вы удаляете изображение, оно запускает функцию show() в image_preview_controller.js. ?

Мне нравится использовать такие маленькие контроллеры Stimulus, которые отлично работают вместе.

В Rails Designer включен этот контроллер Stimulus с несколькими добавленными дополнениями. Получите копию сегодня.