[Web]dropzone.js 활용

---

🐐 Dropzone.js 빠르게 적용하기

보기좋은걸로 빠르게 구현하고 좋다.

<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />

<!-- dropzone.js  -->
<div class="form-group">
<label>파일 업로드</label>
<div class="dropzone" id="div_dropzone">
    <div class="dz-message" data-dz-message>
    <span>파일을 여기에 끌어다 놓으세요</span>
    <p>그림파일 확장자만 첨부가 가능합니다.</p>
    </div>
</div>
</div>

<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>

      let addedFiles = [];

      Dropzone.autoDiscover = false; // deprecated 된 옵션. false로 해놓는걸 공식문서에서 명시
      const div_dropzone_obj = new Dropzone('#div_dropzone', {
        init:function(){
            console.log('div_dropzone init');
            /* 최초 dropzone 설정시 init을 통해 호출 */
            var submitButton = document.querySelector("#submitBtn"); //전송버튼
            var div_dropzone = this; //closure
            submitButton.addEventListener("click", function (e) {
                console.log("업로드"); //tell Dropzone to process all queued files
                e.preventDefault();
                e.stopPropagation();
                div_dropzone.processQueue();
            });
            // 파일이 업로드되면 실행
            this.on('addedfile', function (file) {
              // 중복된 파일의 제거
              if (this.files.length) {
                  // -1 to exclude current file
                  var hasFile = false;
                  for (var i = 0; i < this.files.length - 1; i++) {
                    if (
                        this.files[i].name === file.name &&
                        this.files[i].size === file.size &&
                        this.files[i].lastModifiedDate.toString() === file.lastModifiedDate.toString()
                    ) {
                        hasFile = true;
                        this.removeFile(file);
                        console.log('중복된 파일을 삭제하였습니다.', file);
                    }
                  }
                  if (!hasFile) {
                    addedFiles.push(file);
                  }
              } else {
                  addedFiles.push(file);
              }
              // 파일이 추가되면 실행
              console.log('파일이 추가되었습니다.', file);
            });
            // sending event
            this.on('sending', function (file, xhr, formData) {
              //do something
            });
            this.on("sendingmultiple", function(file, xhr, formData) {
              // Gets triggered when the form is actually being sent.
              // Hide the success button or the complete form.
              console.log('sendingmultiple');
              // 여러파일 보낼때 추가
              formData.append('_company', $('#_company').val());
              formData.append('_PartName', $('#_PartName').val());
              
            });
            this.on("successmultiple", function(files, response) {
              // Gets triggered when the files have successfully been sent.
              // Redirect user or notify of success.
              vision_modal_show(response.discrimination, response.createDate, response.fileName, response.file_path, response.toString())
              console.log('successmultiple');
              console.log(response.toString());
              //Dropzone.forElement('#vision_Dropzone').removeAllFiles(true)
              
            });
            this.on("errormultiple", function(files, response) {
              // Gets triggered when there was an error sending the files.
              // Maybe show form again, and notify user of error
            });
            this.on("complete", function(file) {
              // Gets triggered when the upload was completed (either success or error).
              console.log('complete');
              vision_Dropzone.removeFile(file);
            });
            
          },
          //clickable : false, //클릭시 파일 선택이 가능하도록 설정
          url: '/vision/vision_detect', // 파일을 업로드할 서버 주소 url.
          method: 'post', // 기본 post로 request 감. put으로도 할수있음
          paramName: 'images', // 서버로 전송할 파일의 파라미터 이름
          addRemoveLinks: true, // 삭제버튼 표시 여부
          autoProcessQueue: false, // 파일을 추가하면 자동으로 업로드 여부
          uploadMultiple: true, // 다중업로드 기능
          parallelUploads: 5000, // 동시에 업로드할 파일 수
          maxFiles: 5000, // 업로드 파일수
          maxFilesize: 100, // 최대업로드용량 : 100MB
          createImageThumbnails: true, //파일 업로드 썸네일 생성
          addRemoveLinks: true, // 업로드 후 파일 삭제버튼 표시 여부
          dictRemoveFile: '삭제', // 삭제버튼 표시 텍스트
          acceptedFiles: '.jpeg,.jpg,.png,.gif,.JPEG,.JPG,.PNG,.GIF', // 이미지 파일 포맷만 허용
          thumbnailHeight: 120, // Upload icon size
          thumbnailWidth: 120, // Upload icon size
          dictDefaultMessage: '파일을 여기에 끌어 놓으세요.', // 기본 메시지
          dictFallbackMessage: '브라우저가 드래그 앤 드롭을 지원하지 않습니다.', // 브라우저가 drag and drop을 지원하지 않을 때 보여지는 메시지
          freezWhenUploading: true, // 업로드 중에는 파일 추가 불가
          freezWhenUploading: false, // 업로드 중에도 파일 추가 가능
          progressbar: false, // 업로드 진행바 표시 여부
          autoDiscover: false, // deprecated 된 옵션. false로 해놓는걸 공식문서에서 명시
          success: function (file, response) {
            //Do something
          },
          //실패
          error: function (file, response) {
            //Do something
          },
          
          totaluploadprogress(uploadProgress) {
            $('.progress-bar').css('width', uploadProgress + '%')
          },
      }); // dropzone end

🕵🏽‍♂️ CSS

---

Note: 만들고나니 내것이 아니었다.