Dieser Artikel wurde ursprünglich auf Rails Designer veröffentlicht

In einem früheren Artikel habe ich eine Möglichkeit untersucht, Bilder vor dem Hochladen mit Stimulus in der Vorschau anzuzeigen.

Ich weiß, dass ich die Funktionalität durch Hinzufügen von Drag & Drop erweitern möchte. Unterwegs nutze ich auch Stimulus-Outlets, um die beiden Funktionen miteinander zu verbinden. Präsentation einer fortgeschritteneren Verwendung kleiner Stimulus-Controller.

Ich gehe davon aus, dass Sie alle Schritte des zuvor genannten Artikels durchlaufen haben.

Beginnen wir mit dem HTML. Es wird das andere HTML mit nur wenigen hinzugefügten Attributen verwendet.

Erstellen wir die Datei 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]);
  }
}

Diese Methoden verhindern lediglich das Standardereignis, wenn diese Aktionen aufgerufen werden. Die Funktion drop() ruft auch die private Funktion this.#updateInputField() auf. Fügen wir es hinzu.

export default class extends Controller {
  // …

  // private
  #updateInputField(file) {
    const dataTransfer = new DataTransfer();

    dataTransfer.items.add(file);

    this.inputTarget.files = dataTransfer.files;
  }
  // …
}

Dadurch wird das abgelegte Bild in das Feld inputTarget eingefügt. Und ganz einfach können Sie Bilder per Drag & Drop auf das Element ziehen. ?

Vorschaubilder mit Steckdosen

Ein wichtiger Teil fehlt jedoch … das Bild wird nicht angezeigt, was wie ein Fehler aussieht. Glücklicherweise ist image_preview_controller.js bereits fertig. Dies ist eine einfache Übung.

Passen Sie zunächst den HTML-Code an, indem Sie die folgenden Attribute hinzufügen:

Hinzugefügt:

• data-dropzone-image-preview-outlet="#image-preview";
• id="image-preview".

Jetzt werden zwei Zeilen in der dropzone_controller.js benötigt.

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

  drop(event) {
    // …

    this.imagePreviewOutlet.show();

    // …
  }

  // …
}

Wenn Sie jetzt ein Bild ablegen, wird die Funktion show() auf der Datei image_preview_controller.js ausgelöst. ?

Ich verwende gerne kleine Stimulus-Controller wie diese, die hervorragend zusammenarbeiten.

Rails Designer hat diesen Stimulus-Controller mit einigen zusätzlichen Extras verpackt. Holen Sie sich noch heute Ihr Exemplar.