dropzone 공부

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#form_%ED%83%9C%EA%B7%B8

🎨 Dropzone - 이미지 & 파일 업로드 (드래그 앤 드롭) 라이브러리

https://docs.dropzone.dev/

Introduction - Dropzone

https://yeahvely.tistory.com/123

DropZone 썸네일에 버튼 추가하기

https://cofs.tistory.com/364

jquery 드래그 앤 드롭 파일 업로드

https://askforyou.tistory.com/9

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

 

 

#누군가가 만들어놓은 코드

$(document).ready(function() {



   $(".file-dropzone").on('dragover', handleDragEnter);

   $(".file-dropzone").on('dragleave', handleDragLeave);

   $(".file-dropzone").on('drop', handleDragLeave);



   function handleDragEnter(e) {

      this.classList.add('drag-over');

   }



   function handleDragLeave(e) {

      this.classList.remove('drag-over');

   }



   Dropzone.autoDiscover = false;

   

   $('.dropzone').each(function() {

      var id = $(this).attr('id');

      var url = $(this).data('url');

      

      $('div#' + id).dropzone({

         url : url,

         autoProcessQueue : true,

         uploadMultiple : true,

         maxFilesize : 256,

         thumbnailWidth: 180,

          thumbnailHeight: 120,

          parallelUploads: 100,

         maxFiles : 3,

         addRemoveLinks : true,

         acceptedFiles: ".jpeg,.jpg,.png,.gif,.JPEG,.JPG,.PNG,.GIF",

         // The setting up of the dropzone

         accept: function(file, done) {

             done();

         },

         init : function() {

            var myDropzone = this;

            var count = myDropzone.options.maxFiles;

            $.getJSON("./file/list.do", $("#"+id).find('input[type=hidden]')).done(function (data) {

               

               $('#'+id).find('input[type=hidden]').remove();

                    if (data.data != '' && data.data != undefined) {

                     var existingFileCount = 0;

                        $.each(data.data, function (index, item) {

                            var mockFile = {

                                name: item.logicFileNm,

                                size: item.fileSize,

                                seq: item.fileId

                            };

                            myDropzone.emit("addedfile", mockFile);

                            myDropzone.emit("thumbnail", mockFile, item.filePath);

                            myDropzone.emit("success", mockFile);

                            myDropzone.files.push(mockFile);

                            

                            existingFileCount = existingFileCount + 1;

                        });

                        myDropzone.options.maxFiles = myDropzone.options.maxFiles - existingFileCount;

                    }

                });

            

            this.on("maxfilesexceeded", function (file) {

               alert('Max File Count : ' + count);

               myDropzone.removeFile(file);

            });

                

                this.on("success", function( file, resp, formData ){

                  var type = $("#"+id).data("type");

                  if(resp != null && resp != undefined) {

                     if(resp.data != null && resp.data != '' && resp.data != undefined) {

                        var existingFileCount = 0;

                        $.each(resp.data, function(){

                           file.previewElement.appendChild(Dropzone.createElement("<input type='hidden' name='fileId' value='" + this.fileId + "'/>"));

                           existingFileCount = existingFileCount + 1;

                        });

                     }

                  }

                  

                  if(file.seq != null && file.seq != '' && file.seq != undefined) {

                  file.previewElement.appendChild(Dropzone.createElement("<input type='hidden' name='fileId' value='" + file.seq + "'/>"));

                  }

                  

                });

                

                this.on("removedfile", function (data) {

                  var id = $(data.previewElement).find('input[name=fileId]').val();

                  $.ajax({

                     url: './file/delete.do',

                     type: 'POST',

                     data: { 'fileId' : id }

                  });

                  myDropzone.options.maxFiles = myDropzone.options.maxFiles + 1;

                  if(count < myDropzone.options.maxFiles) myDropzone.options.maxFiles = count;

                });

         }

      });

   });

   

   $('.push').click(function() {

      $('.dropzone').each(function() {

         

      });

   });

   

});