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

18 Dec 2023

javascript

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

// Dropzone.js 초기화
var myDropzone = new Dropzone("#my-dropzone", { 
  url: "/file/post", 
  paramName: "file",
  autoProcessQueue: false 
});

// 파일이 추가될 때의 이벤트 처리
myDropzone.on("addedfile", function(file) {
  // 파일 정보를 저장 (예: 파일명과 서버에 저장된 ID)
  var fileId = 123; // 예시로 123을 사용합니다
  file.fileId = fileId; // 파일 객체에 fileId를 추가하여 파일 식별
});

// 파일 삭제 버튼 클릭 시의 이벤트 처리
myDropzone.on("removedfile", function(file) {
  // 파일 삭제 요청
  var fileId = file.fileId;
  // 서버로 fileId를 전송하여 해당 파일을 삭제하도록 요청
  // 예: $.post("/file/delete", {fileId: fileId});
});

이 예제에서는 addedfile 이벤트와 removedfile 이벤트를 사용하여 파일을 추가 및 삭제할 때 필요한 작업을 처리하였습니다.

아래 Dropzone.js 공식 문서 및 레퍼런스를 참조하시면 더 자세한 정보를 얻을 수 있습니다.

Dropzone.js 공식 문서: https://www.dropzonejs.com/
Dropzone.js GitHub 레퍼런스: https://github.com/dropzone/dropzone