[JS] webserver 최대 크기 문제 해결(feat. dropzone)

개인 ftp에 존재하는 파일을 웹으로 업&다운로드 하기위해  dropzone을 사용했다.

 

dropzone의 장점인 파일을 drag&drop하는 기능보다는 

 

파일을 web에 나눠 저장하는 기능때문에 사용한다.

 

- 아래는 완전한 정보는 아니므로 참고만 하자

 

예를 들어 파일을 전송받을 때 http의 최대 전송 패킷(데이터 부분) 크기는 1500byte정도 되므로

 

데이터를 받을 때마다 임시폴더에 저장을 하게된다.

 

나의 개인 ftp서버는 라즈베리에서 진행하게 되는데 임시저장폴더인 /tmp는 10MB 밖에 되지 않는다.

 

그러므로 10MB 이상의 파일은 데이터를 받다가 멈춰버린다.

(nginx 최대 전송 크기 문제와는 별개다. Bad Gate - Too Large에러를 본다면 nginx 파일 전송 최대 크기 변경을 검색)

 

/tmp를 늘리고 싶었지만 나의 실력으로는 부족했고 

 

파일을 웹서버에 나눠 저장하는 Dropzone을 발견해서 사용중이다.

 

임시폴더가 아닌 웹서버에 나눠서 저장된다.

 

(지나가는 고수분들이 있다면 옳은 정보인지 조언 부탁드립니다!)

 

---

 

아래는 참고한 사이트이다. 2번째 예제를 참고하였다.

https://inpa.tistory.com/entry/Dropzone-%F0%9F%93%9A-%EC%9D%B4%EB%AF%B8%EC%A7%80-%ED%8C%8C%EC%9D%BC-%EC%97%85%EB%A1%9C%EB%93%9C-%EB%93%9C%EB%9E%98%EA%B7%B8-%EC%95%A4-%EB%93%9C%EB%A1%AD-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%EC%82%AC%EC%9A%A9%EB%B2%95

 

 

위 예제에서 수정한 Dropzone 초기화 방법이다.

var myDropzone = new Dropzone(".container", {
  url: "/drive/upload",
  method:"post",
  thumbnailWidth: 80,
  thumbnailHeight: 80,
  parallelUploads: 20,
  paramName:function(){return "files";},
  previewTemplate: previewTemplate,
  autoQueue: false,
  previewsContainer: "#previews",
  clickable: ".fileinput-button",
  uploadMultiple:true
});

 

uploadMultiple은 업로드시 파일을 여러개 업로드하는 파라미터이고 

paramName은 업로드하는 파일의 이름을 지정해주는데

paramName:files 라고하면 uploadMultiple:true시 이름이 자동으로 files[0], files[1]이라고 지정된다.

 

multer을 사용하는데 좀 불편하니 paramName:function(){return "files";}으로 재정의하여 모두 files로 바꾸어준다.

 

 

이하 dropzone.js 사용법 게시물 업로드 예정