Stimulus Outlet을 사용하여 미리보기로 이미지 드래그 앤 드롭

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

---

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

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

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

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

<div data-controller="image-preview dropzone" data-action="dragover->dropzone#dragOver dragleave->dropzone#dragLeave drop->dropzone#drop">
  <img data-image-preview-target="canvas" hidden class="object-cover size-48">

  <input type="file" accept="image/*" data-image-preview-target="source" data-dropzone-target="input" data-action="image-preview#show" hidden>
</div>

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을 조정하세요.

<div data-controller="image-preview dropzone" data-dropzone-image-preview-outlet="#image-preview" data-action="dragover->dropzone#dragOver dragleave->dropzone#dragLeave drop->dropzone#drop" id="image-preview>
  <img data-image-preview-target="canvas" hidden class="object-cover size-48">

  <input type="file" accept="image/*" data-image-preview-target="source" data-dropzone-target="input" data-action="image-preview#show" hidden>
</div>

추가됨:

• 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 컨트롤러 패키지가 있습니다. 지금 바로 사본을 받아보세요.

위 내용은 Stimulus Outlet을 사용하여 미리보기로 이미지 드래그 앤 드롭의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!