Dropzone.js 설치

Dropzone.js는 파일을 드래그 앤 드롭으로 업로드 할 수 있는 프론트엔드 라이브러리이다. 파일을 끌어다 놓는 순간 바로 업로드가 진행된다. 하지만 프로젝트에서 파일과 제목을 한꺼번에 입렵받아야 했다.

Upload all files with a button

dropzone Github Wiki에 버튼 클릭 시, 업로드 할 수 있는 방법이 있다. 프로젝트에서는 dropzone을 programmatically 방식으로 생성했다. 그래서 아래와 같이 구현했다.

var myDropzone = new Dropzone("div#my_dropzone_id", {
        url: "/your/upload/path",

        // 파일이 즉시 업로드 되는 것을 방지
        autoProcessQueue: false,
    });


$("#submit-all").click(function (e) {
        // 폼 중복 제출을 방지
        e.preventDefault();
        e.stopPropagation();

        // 대기중인 파일들을 처리
        myDropzone.processQueue();
    });

Add additional data to the file upload

파일 업로드 방식을 바꿨으니, 제목 입력도 받아야 한다. Dropzone 문서 - Tipssending 이벤트를 사용하라고 안내하고 있다.

myDropzone.on("sending", function(file, xhr, formData) {
  // Will send the filesize along with the file as POST data.
  formData.append("filesize", file.size);
});

프로젝트에서는 폼을 통해 입력받은 제목을 함께 보내야 한다. 그래서 버튼을 클릭하는 순간 jQuery를 이용해 값을 가져와 전달했다.

myDropzone.on("sending", function (file, xhr, formData) {
    formData.append("title", title)
});

$("#submit-all").click(function (e) {
    title = $("#title_id").val();

    e.preventDefault();
    e.stopPropagation();
    myDropzone.processQueue();
});