[javascript] Dropzone.js에서 드래그 앤 드롭 기능을 구현하는 방법은 무엇인가요?

18 Dec 2023

javascript

먼저, Dropzone.js를 HTML 문서에 포함시킵니다. 아래는 간단한 예시입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Dropzone 예제</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.css">
</head>
<body>

<form action="/file-upload" class="dropzone"></form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.js"></script>
</body>
</html>

위 예제에서는 Dropzone 라이브러리와 스타일시트를 HTML 문서에 포함시키고, 업로드할 파일을 받을 폼을 만들었습니다. class="dropzone" 속성을 가진 폼 엘리먼트가 드래그 앤 드롭 영역을 나타냅니다.

이제 JavaScript를 사용하여 Dropzone 인스턴스를 생성하고 구성할 수 있습니다.

<script>
  // Dropzone 인스턴스 생성
  Dropzone.autoDiscover = false;
  const myDropzone = new Dropzone(".dropzone", { 
    url: "/file-upload",
    autoProcessQueue: false // 파일을 바로 업로드하지 않도록 설정
  });

  // 파일이 추가되었을 때 이벤트 핸들러
  myDropzone.on("addedfile", function(file) {
    console.log("새 파일이 추가되었습니다: " + file.name);
  });

  // 업로드 버튼 클릭 시 파일 업로드
  document.querySelector("#upload-btn").addEventListener("click", function() {
    myDropzone.processQueue(); // 파일 업로드 수행
  });
</script>

위의 JavaScript 코드에서는 Dropzone 인스턴스를 생성하고, 파일이 추가되거나 업로드 버튼이 클릭될 때의 동작을 정의했습니다. autoProcessQueue 옵션을 false로 설정하여 파일이 바로 업로드되지 않도록 하고, 업로드 버튼 클릭 시 processQueue 메서드를 호출하여 파일을 업로드하도록 했습니다.

이제 위의 코드를 사용하여 Dropzone.js를 통해 드래그 앤 드롭 파일 업로드 기능을 구현할 수 있습니다.