[javascript] Dropzone.js를 사용하여 파일 업로드 시 서버로 추가 데이터 전송하는 방법은 무엇인가요?

18 Dec 2023

javascript

먼저, Dropzone.js를 HTML에 추가해보겠습니다.

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

그 다음으로는 JavaScript를 사용하여 Dropzone을 초기화하고, 파일 업로드와 함께 전송할 추가 데이터를 설정할 수 있습니다.

// Dropzone 초기화
Dropzone.options.myAwesomeDropzone = {
  url: "/file-upload",
  paramName: "file", // 파일 이름 설정
  maxFilesize: 2, // 최대 파일 크기 설정 (MB 단위)
  addRemoveLinks: true, // 파일 삭제 링크 추가 여부
  dictDefaultMessage: "여기에 파일을 끌어다 놓거나 클릭하여 업로드하세요",
  // 추가 데이터 전송 설정
  sending: function(file, xhr, formData) {
    // 추가 데이터 추가
    formData.append("username", "JohnDoe");
    formData.append("description", "파일 설명");
  }
};

위의 예제에서 sending 함수 내에서 formData.append를 사용하여 서버로 전송할 추가 데이터를 추가합니다. 이제 파일 업로드와 함께 “username” 및 “description”과 같은 추가 데이터가 서버에 전송될 것입니다.

이와 유사하게, 필요에 따라 Dropzone.js의 이벤트나 설정을 사용하여 추가 데이터를 서버로 전송할 수 있습니다. 이를 통해 파일 업로드시에 사용자 관련 데이터나 해당 파일에 대한 설명과 같은 추가 정보를 함께 전송할 수 있습니다.