Este artículo se publicó originalmente en Rails Designer

En un artículo anterior exploré una forma de obtener una vista previa de las imágenes antes de cargarlas con Stimulus.

Sé que quiero ampliar su funcionalidad agregando una función de arrastrar y soltar. En el camino, también estoy usando salidas de estímulo para unir las dos funcionalidades. Mostrando un uso más avanzado de pequeños controladores Stimulus.

Supongo que has seguido todos los pasos del artículo mencionado anteriormente.

Comencemos con el HTML. Está usando el otro HTML con solo algunos atributos agregados.

Creemos el 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]);
  }
}

Todo lo que hacen estos métodos es evitar el evento predeterminado cuando se invocan estas acciones. La función drop() también llama a la función privada this.#updateInputField(). Agreguémoslo.

export default class extends Controller {
  // …

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

    dataTransfer.items.add(file);

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

Esto inyectará la imagen soltada en el campo inputTarget. Y así, puedes arrastrar y soltar imágenes en el elemento. ?

Vista previa de imágenes con salidas

Sin embargo, falta una parte importante... la imagen no se muestra, lo que parece un error. Afortunadamente, con el image_preview_controller.js ya está hecho. Este es un ejercicio sencillo.

Primero modifique el HTML agregando los siguientes atributos:

Agregado:

• data-dropzone-image-preview-outlet="#image-preview";
• id="vista previa de imagen".

Ahora se necesitan dos líneas en dropzone_controller.js.

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

  drop(event) {
    // …

    this.imagePreviewOutlet.show();

    // …
  }

  // …
}

Ahora, cuando sueltas una imagen, se activa la función show() en image_preview_controller.js. ?

Me gusta usar pequeños controladores Stimulus como estos que funcionan muy bien juntos.

Rails Designer tiene este controlador Stimulus empaquetado con algunos extras agregados. Obtenga su copia hoy.