Glissez-déposez des images avec aperçu à l'aide de Stimulus Outlets

Cet article a été initialement publié sur Rails Designer

---

Dans un article précédent, j'ai exploré un moyen de prévisualiser les images avant de les télécharger avec Stimulus.

Je sais que je souhaite étendre ses fonctionnalités en ajoutant un glisser-déposer. En cours de route, j'utilise également les prises Stimulus pour relier les deux fonctionnalités. Présentant une utilisation plus avancée des petits contrôleurs Stimulus.

Je suppose que vous avez suivi toutes les étapes de l'article mentionné précédemment.

Commençons par le HTML. Il utilise l'autre code HTML avec seulement quelques attributs ajoutés.

<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>

Créons le 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]);
  }
}

Toutes ces méthodes empêchent l'événement par défaut lorsque ces actions sont invoquées. La fonction drop() appelle également la fonction privée this.#updateInputField(). Ajoutons-le.

export default class extends Controller {
  // …

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

    dataTransfer.items.add(file);

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

Cela injectera l'image déposée dans le champ inputTarget. Et juste comme ça, vous pouvez glisser et déposer des images sur l'élément. ?

Aperçu des images avec les points de vente

Il manque cependant une partie importante… l'image n'est pas affichée, ce qui ressemble à un bug. Heureusement avec le image_preview_controller.js déjà fait. C'est un exercice simple.

Modifiez d'abord le code HTML en ajoutant les attributs suivants :

<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>

Ajouté :

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

Maintenant, deux lignes sont nécessaires dans le dropzone_controller.js.

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

  drop(event) {
    // …

    this.imagePreviewOutlet.show();

    // …
  }

  // …
}

Maintenant, lorsque vous déposez une image, la fonction show() est lancée sur image_preview_controller.js. ?

J'aime utiliser de petits contrôleurs de stimulation comme ceux-ci qui fonctionnent très bien ensemble.

---

Rails Designer propose ce contrôleur Stimulus avec quelques extras ajoutés. Obtenez votre exemplaire aujourd'hui.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!