DropZone 썸네일에 버튼 추가하기

Dropzone에 업로드된 사진 썸네일 아래에 삭제버튼을 추가함

 

플러그인에 기본으로 있는 remove버튼을 사용해도 되었지만
버튼을 클릭해서 다른 이벤트를 주고 싶다던가
버튼의 css를 변경하고 싶은경우가 생겨 부득이하게 새로운 버튼을 생성하게 됨.

1. 먼저 삽입할 버튼의 html을 선언한다.

var dz_delete_button = '<button type="button" class="btn btn-danger btn-xs dz-delete-btn"><span class="glyphicon glyphicon-trash"></span> 삭제 </button>';

 

2. dropzone의 이벤트 안에 Element를 추가한다.

file_dropzone.on('addedfile', function (file) {
		var remove_button = Dropzone.createElement(dz_delete_button);
        var _this = this;												
        
        remove_button.addEventListener('click', function (e) {
             e.preventDefault(); // click이벤트 외의 이벤트 막기위해
             e.stopPropagation(); // 부모태그로의 이벤트 전파를 중지
             
             // 파일 업로드시 장애가 발생한 경우
             if (file['status'] != 'error') {
             
                // Send Client Event Delete
            
              }
              _this.removeFile(file);
          });
          file.previewElement.appendChild(remove_button);
});

 

3. css변경이 필요하다면 해당버튼에 클래스를 주고 스타일을 부여하면 적용된다.

추가된 버튼의 css를 변경

.dropzone .dz-delete-btn {
	position : absolute;
	bottom: 0;
	left : 0;
	margin : 0 !important;
	width: 100%;
}

 

4. 썸네일의 border-radius 값변경
.dropzone .dz-preview .dz-image 의 기본 radius값은 20으로 되어있으므로 원하는 값으로 css 변경하면된다.

썸네일의 css를 변경

.dropzone .dz-preview .dz-image {
	border-radius: 0 !important;
}