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

18 Dec 2023

javascript

첫째로, Dropzone.js에 파일이 추가될 때 이벤트를 감지하여 삭제 버튼을 추가해야 합니다.

Dropzone.options.myDropzone = {
  init: function() {
    this.on("addedfile", function(file) {
      // Create a remove button
      var removeButton = Dropzone.createElement("<button class='dz-remove'>Remove file</button>");
      var _this = this;

      // Listen to the click event
      removeButton.addEventListener("click", function(e) {
        // Make sure the button click doesn't submit the form:
        e.preventDefault();
        e.stopPropagation();
        // Remove the file from the dropzone
        _this.removeFile(file);
      });

      // Add the button to the file preview element
      file.previewElement.appendChild(removeButton);
    });
  }
};

두번째로, 해당 파일을 삭제할 때의 이벤트를 처리해야 합니다.

this.on("removedfile", function(file) {
  // Perform any necessary actions after the file is removed
  console.log("File " + file.name + " removed");
});

이러한 코드 조각을 Dropzone.js 설정에 추가하면 파일 삭제를 구현할 수 있습니다.