"If a worker wants to do his job well, he must first sharpen his tools." - Confucius, "The Analects of Confucius. Lu Linggong"
Front page > Programming > Drag & Drop Images with Preview using Stimulus Outlets

Drag & Drop Images with Preview using Stimulus Outlets

Published on 2024-11-04
Browse:780

Drag & Drop Images with Preview using Stimulus Outlets

This articles was originally published on Rails Designer


In a previous article I explored a way to preview images before upload with Stimulus.

I know want to extend its functionality by adding a drag & drop. Along the way I am also using Stimulus outlets to tie the two functionalities together. Showcasing more advanced use of small Stimulus controllers.

I assume you walked through all the steps of the previous mentioned article.

Let's start with the HTML. It's using the other HTML with just a few attributes added.

Let's create the 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]);
  }
}

All these methods do is preventing the default event when these actions are invoked. The drop() function also calls the private function this.#updateInputField(). Let's add it.

export default class extends Controller {
  // …

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

    dataTransfer.items.add(file);

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

This will inject the dropped image into the inputTarget field. And just like that you can drag and drop images onto the element. ?

Preview images with outlets

An important part is missing though… the image isn't show which looks like a bug. Luckily with the image_preview_controller.js already done. This is a simple exercise.

First tweak the HTML by adding the following attributes:


Added:

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

Now two lines are needed in the dropzone_controller.js.

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

  drop(event) {
    // …

    this.imagePreviewOutlet.show();

    // …
  }

  // …
}

Now when you drop an image it fires the show() function on the image_preview_controller.js. ?

I like to use small Stimulus controllers like these that work great together.


Rails Designer has this Stimulus controller packaged with a few extras added. Get your copy today.

Release Statement This article is reproduced at: https://dev.to/railsdesigner/drag-drop-images-with-preview-using-stimulus-outlets-4k9h?1 If there is any infringement, please contact [email protected] to delete it
Latest tutorial More>

Disclaimer: All resources provided are partly from the Internet. If there is any infringement of your copyright or other rights and interests, please explain the detailed reasons and provide proof of copyright or rights and interests and then send it to the email: [email protected] We will handle it for you as soon as possible.

Copyright© 2022 湘ICP备2022001581号-3