[Dropzone.js] dropzone.js 업로드 구현하기

html 코드

<form name="fname">
	<div class="dropzone" id="fileDropzone"></div>
	<button id="btn-upload-file">서버전송</button>
</form>

 

아래 코드는 업로드 창에서 무제한(?)으로 업로드 할 수 있다.

<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
<script>
  Dropzone.options.fileDropzone = { 
      url: '주소 주소', //업로드할 url (ex)컨트롤러) 
      init: function () { /* 최초 dropzone 설정시 init을 통해 호출 */ 
      var submitButton = document.querySelector("#btn-upload-file");
      var myDropzone = this; //closure
      submitButton.addEventListener("click", function () { 
        console.log("업로드"); //tell Dropzone to process all queued files 
        myDropzone.processQueue();
      });
    },
    autoProcessQueue: false, // 자동업로드 여부 (true일 경우, 바로 업로드 되어지며, false일 경우, 서버에는 올라가지 않은 상태임 processQueue() 호출시 올라간다.)
    clickable: true, // 클릭가능여부
    thumbnailHeight: 120, // Upload icon size 
    thumbnailWidth: 120, // Upload icon size
    maxFiles: 1, // 업로드 파일수
    maxFilesize: 100, // 최대업로드용량 : 100MB
    parallelUploads: 1, // 동시파일업로드 수(이걸 지정한 수 만큼 여러파일을 한번에 컨트롤러에 넘긴다.)
    addRemoveLinks: true, // 삭제버튼 표시 여부
    dictRemoveFile: '삭제', // 삭제버튼 표시 텍스트
    uploadMultiple: false, // 다중업로드 기능 
    acceptedFiles: ".jpeg,.jpg,.png,.gif,.JPEG,.JPG,.PNG,.GIF",
  };
</script>

 

하지만, 나는 한개만 업로드하고 기존것을 제거하는 것이 필요하여, 한개만 업로드 하는 기능을 구현하였다.

<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
<script>
  Dropzone.options.fileDropzone = { 
      url: '주소 주소', //업로드할 url (ex)컨트롤러) 
      init: function () { /* 최초 dropzone 설정시 init을 통해 호출 */ 
      var submitButton = document.querySelector("#btn-upload-file");
      var myDropzone = this; //closure
      submitButton.addEventListener("click", function () { 
        console.log("업로드"); //tell Dropzone to process all queued files 
        myDropzone.processQueue();
      });
      this.on("maxfilesexceeded", function(file) { // 파일 한개만 업로드
        this.removeAllFiles();
        this.addFile(file);
      });
    },
    autoProcessQueue: false, // 자동업로드 여부 (true일 경우, 바로 업로드 되어지며, false일 경우, 서버에는 올라가지 않은 상태임 processQueue() 호출시 올라간다.)
    clickable: true, // 클릭가능여부
    thumbnailHeight: 120, // Upload icon size 
    thumbnailWidth: 120, // Upload icon size
    maxFiles: 1, // 업로드 파일수
    maxFilesize: 100, // 최대업로드용량 : 100MB
    parallelUploads: 1, // 동시파일업로드 수(이걸 지정한 수 만큼 여러파일을 한번에 컨트롤러에 넘긴다.)
    addRemoveLinks: true, // 삭제버튼 표시 여부
    dictRemoveFile: '삭제', // 삭제버튼 표시 텍스트
    uploadMultiple: false, // 다중업로드 기능 
    acceptedFiles: ".jpeg,.jpg,.png,.gif,.JPEG,.JPG,.PNG,.GIF",
  };
</script>

 

이제 문제로는 이것을 서버에 제출할때 사진도 한번에 제출하는 방식으로 가야하는데,

그것에대해서 고민해봐야겠다.

 

-공식문서-

https://www.dropzone.dev/js/

Dropzone.js

-코드 출처-

https://askforyou.tistory.com/9

dropzone.js (드롭존) 드래그앤드롭 파일 업로드

https://answer-id.com/ko/58013492

javascript - dropzone 하나의 파일만 업로드 - Answer-ID