DropzoneJs 파일 드래그앤드랍 구현

드래그 앤 드랍으로 파일 업로드 시 div element에 드래그 이벤트를 추가해서 업로드 된 파일을 서버에 올릴 수도 있다.

 

드래그가 발생할 때 드래그 이벤트가 끝날 때 등 이벤트를 제어하는데 여러모로 손이 많이 가는 경우가 있다.

 

 

DropzoneJs을 활용하여 쉽고 간단하게 드래그 앤 드랍으로 파일을 서버에 올려보도록 할 것이다.

 

먼저 DropzoneJs를 설치해보자

 

DropzoneJs, css 파일은 아래 링크에서 다운로드 받을 수 있다.

www.dropzonejs.com/#installation

Dropzone.js

js와 css를 적절한 위치에 추가한다.

<script src="./파일경로/dropzone.js"></script>
<link rel="stylesheet" href="/파일경로/dropzone.css">

 

dropzone 영역 div를 생성한다.

<div>
    <form class="dropzone" id="dropzone-file" enctype="multipart/form-data" method="POST">
        <div class="dz-message needsclick">
            Drop files here or click to upload
            <span class="note needsclick">(클릭 또는 드래그&드랍으로 업로드할 수 있습니다.)</span>
	    </div>
        <div class="fallback">
            <input name="file" type="file" multiple>
        </div>
    </form>
</div>

Post로 파일을 넘겨주고 enctype="multipart/form-data" 꼭 추가해주는 걸 잊지말자

 

 

이제 dropzone 을 객체를 생성하고 각 옵션에 대해 알아보자

var dropzoneFile=new Dropzone("#dropzone-file",{
                      url:'url 설정',
                      maxFilesize:5000000000,
                      parallelUploads:5,    //한번에 올릴 파일 수
                      addRemoveLinks:  true, //업로드 후 삭제 버튼 
                      timeout:300000,	//커넥션 타임아웃 설정 -> 데이터가 클 경우 꼭 넉넉히 설정해주자
                      maxFiles:5,       //업로드 할 최대 파일 수
                      paramName:"file", //파라미터로 넘길 변수명 default는 file
                      autoQueue:true,	//드래그 드랍 후 바로 서버로 전송
                      createImageThumbnails:true,	//파일 업로드 썸네일 생성
                      uploadMultiple:true,	//멀티파일 업로드
                      dictRemoveFile:'삭제',	//삭제 버튼의 텍스트 설정
                      dictDefaultMessage:'PREVIEW', //미리보기 텍스트 설정
                      accept:function(file,done){
                          //validation을 여기서 설정하면 된다.
                          //설정이 끝나고 꼭 done()함수를 호출해야 서버로 전송한다. 
                          done(); 
                      },
                      init:function(){
                          this.on('success',function(file,responseText){
                              var obj = JSON.parse(responseText);
                              //서버로 파일이 전송되면 실행되는 함수이다.
                              //obj 객체를 확인해보면 서버에 전송된 후 response 값을 확인할 수 있다.
                          })
                      }
				      				     
                  });

DropzoneJs 다양한 플러그인을 통해 원하는 이벤트를 캐치해서 다양한 형태의 파일 업로드를 할 수 있다.

그리고 파일의 용량이 클 경우 chunck로 파일을 일정 크기 만큼 쪼개서 업로드할 수 도 있다.

 

자세한 내용은 dropzoneJs 설정을 아래 링크에서 확인해서 적용시키면 된다.

www.dropzonejs.com/#configuration

Dropzone.js