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ésentation d'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.

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. Il s'agit d'un exercice simple.

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

Ajouté :

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

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 Stimulus comme ceux-ci qui fonctionnent très bien ensemble.

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