Dropzone.js를 사용하면 파일을 쉽게 업로드할 수 있습니다. 추가로 서버에 데이터를 전송해야 하는 경우가 있는데, 이때는 Dropzone의 sending 이벤트를 활용할 수 있습니다. 해당 이벤트에서 추가 데이터를 전송할 수 있습니다.

다음은 Dropzone.js를 사용하여 파일 업로드 시 추가 데이터를 전송하는 간단한 방법입니다.

1. HTML 파일 설정

   HTML 파일의 form 요소에 Dropzone 클래스를 추가하고, 필요한 추가 데이터를 입력 필드로 추가합니다.

   <form action="/file-upload" class="dropzone" id="my-awesome-dropzone">
     <div class="fallback">
       <input name="file" type="file" multiple />
     </div>
     <input type="text" name="title" id="title" />
     <button type="submit">Upload</button>
   </form>
   

2. 자바스크립트 코드 작성

   파일 업로드를 위해 Dropzone을 초기화하고, sending 이벤트를 사용하여 추가 데이터를 전송합니다.

   // Dropzone 초기화
   Dropzone.options.myAwesomeDropzone = {
     paramName: "file", // 파일 파라미터 이름
     autoProcessQueue: true, // 파일 자동 업로드
     init: function () {
       this.on("sending", function (file, xhr, formData) {
         // 추가 데이터 전송
         formData.append("title", document.getElementById("title").value);
       });
     },
   };
   

이제 Dropzone.js를 사용하여 파일을 업로드할 때 추가 데이터도 함께 전송할 수 있습니다.