[javascript] Dropzone.js에서 파일 업로드 시 파일 삭제 기능을 구현하는 방법은 무엇인가요?

18 Dec 2023

javascript

Dropzone.js에서 파일을 삭제하는 기능은 간단히 구현할 수 있습니다. 먼저, init 이벤트 핸들러를 사용하여 파일이 추가될 때의 동작을 정의합니다. 그런 다음, 클릭 이벤트 리스너를 추가하여 파일 삭제를 처리합니다.

다음은 Dropzone.js에서 파일 삭제 기능을 구현하는 예제입니다.

// Dropzone 인스턴스 생성
var myDropzone = new Dropzone("#my-dropzone", { 
  // Dropzone 설정 
});

// 파일이 추가될 때의 동작 정의
myDropzone.on("addedfile", function(file) {
  // 파일 삭제 버튼 추가
  var removeButton = Dropzone.createElement("<button class='remove-button'>Remove File</button>");

  var _this = this;

  removeButton.addEventListener("click", function(e) {
    e.preventDefault();
    e.stopPropagation();

    // 파일 삭제 처리
    _this.removeFile(file);
  });

  file.previewElement.appendChild(removeButton);
});

위 코드에서, addedfile 이벤트 핸들러에서 각 파일의 삭제 버튼을 추가하고, 삭제 버튼을 클릭했을 때 removeFile 메서드를 사용하여 파일을 삭제합니다.

이제 Dropzone.js를 사용하여 파일 업로드와 삭제를 모두 구현할 수 있습니다.

참고문헌:

https://www.dropzonejs.com/