이 기사는 원래 Rails Designer에 게시되었습니다.

이전 기사에서는 Stimulus를 사용하여 업로드하기 전에 이미지를 미리 보는 방법을 살펴보았습니다.

드래그 앤 드롭을 추가하여 기능을 확장하고 싶습니다. 그 과정에서 저는 두 가지 기능을 함께 묶기 위해 Stimulus 아웃렛을 사용하고 있습니다. 소형 Stimulus 컨트롤러의 고급 사용을 보여줍니다.

이전에 언급된 기사의 모든 단계를 수행했다고 가정합니다.

HTML부터 시작해 보겠습니다. 몇 가지 속성만 추가한 다른 HTML을 사용하고 있습니다.

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

이 모든 메소드는 해당 작업이 호출될 때 기본 이벤트를 방지합니다. drop() 함수는 전용 함수인 this.#updateInputField()도 호출합니다. 추가해 보겠습니다.

export default class extends Controller {
  // …

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

    dataTransfer.items.add(file);

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

드롭된 이미지를 inputTarget 필드에 삽입합니다. 그런 식으로 이미지를 요소에 끌어다 놓을 수 있습니다. ?

콘센트가 포함된 이미지 미리보기

중요한 부분이 빠졌는데... 이미지가 안 보여서 버그인 것 같아요. 다행히 image_preview_controller.js가 이미 완료되었습니다. 이것은 간단한 연습입니다.

먼저 다음 속성을 추가하여 HTML을 조정합니다.

추가됨:

• data-dropzone-image-preview-outlet="#image-preview";
• id="이미지 미리보기".

이제 dropzone_controller.js.
에 두 줄이 필요합니다.

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

  drop(event) {
    // …

    this.imagePreviewOutlet.show();

    // …
  }

  // …
}

이제 이미지를 놓으면 image_preview_controller.js에서 show() 함수가 실행됩니다. ?

저는 함께 잘 작동하는 이와 같은 작은 Stimulus 컨트롤러를 사용하는 것을 좋아합니다.

Rails Designer에는 몇 가지 추가 기능이 추가된 Stimulus 컨트롤러가 패키지로 제공됩니다. 지금 바로 사본을 받으세요.