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 문서 - Tips에 sending
이벤트를 사용하라고 안내하고 있다.
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();
});