Este artigo foi publicado originalmente no Rails Designer

Em um artigo anterior, explorei uma maneira de visualizar imagens antes do upload com o Stimulus.

Sei que quero estender sua funcionalidade adicionando arrastar e soltar. Ao longo do caminho, também estou usando saídas de estímulo para unir as duas funcionalidades. Apresentando o uso mais avançado de pequenos controladores de estímulo.

Presumo que você executou todas as etapas do artigo mencionado anteriormente.

Vamos começar com o HTML. Ele está usando o outro HTML com apenas alguns atributos adicionados.

Vamos criar o 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]);
  }
}

Tudo o que esses métodos fazem é impedir o evento padrão quando essas ações são invocadas. A função drop() também chama a função privada this.#updateInputField(). Vamos adicioná-lo.

export default class extends Controller {
  // …

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

    dataTransfer.items.add(file);

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

Isso injetará a imagem descartada no campo inputTarget. E assim você pode arrastar e soltar imagens no elemento. ?

Visualize imagens com pontos de venda

Mas falta uma parte importante… a imagem não é exibida, o que parece um bug. Felizmente com o image_preview_controller.js já feito. Este é um exercício simples.

Primeiro ajuste o HTML adicionando os seguintes atributos:

Adicionado:

• data-dropzone-image-preview-outlet="#image-preview";
• id="visualização da imagem".

Agora são necessárias duas linhas no dropzone_controller.js.

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

  drop(event) {
    // …

    this.imagePreviewOutlet.show();

    // …
  }

  // …
}

Agora, quando você solta uma imagem, ela aciona a função show() em image_preview_controller.js. ?

Gosto de usar pequenos controladores de estímulo como esses, que funcionam muito bem juntos.

Rails Designer tem este controlador de estímulo embalado com alguns extras adicionados. Obtenha sua cópia hoje.