[Dropzone.js] 게시글 업로드2

작동 로직은 이러합니다.

1. 유저가 dropzone에 사진 드랍 후 제목, 내용 작성

2. 게시글 업로드 저장 버튼 클릭(dropzone이 보내는 이미지는 base64라서 그냥 db 저장 불가.)

3. 이미지 서버로 이미지 업로드 후 성공시 url 주소 가져옴.

4. url 주소를 db 서버에 보내기

+++

이전 로직에 없던 부분이 파일 업로드 체크...

그리고 하다보니 1개를 넘어가면 기존 파일을 삭제하고 다시 업로드 되는 부분도 없어졌더라;;

해당 부분 복구 끝.

Dropzone.options.fileDropzone = { 
  url: '이미지 서버주소', //업로드할 url (ex)컨트롤러) 
  init: function () { /* 최초 dropzone 설정시 init을 통해 호출 */ 
    let myDropzone = this; //closure

    this.on('error', function(file, errorMessage) {
      alert(errorMessage);
      this.removeAllFiles();
    });

    this.on("maxfilesexceeded", function(file) { // 파일 최대 갯수에 따라서 삭제하고 다시 올리는 로직
      this.removeAllFiles();
      this.addFile(file);
    });

    $('#버튼').click(() => {
      if (!myDropzone.files || !myDropzone.files.length) {
      	alert("업로드 된 사진이 없습니다.\n사진 업로드 후 시도해주세요.");
      }
      let title = $('#제목').val();
      let desc = $('#내용').val();


      if(title == '' || title == ' ') {
          alert('제목이 비어있거나 빈공간으로 시작되고 있습니다.');
      } else if(desc == '' || desc == ' ') {
          alert('설명이 비어있거나 빈공간으로 시작되고 있습니다.');
      } else {
        myDropzone.processQueue();
        myDropzone.on("success", function(file, responseText) {
          let data = {
            title,
            desc,
            imgUrl: responseText
          };
          let res = $.ajax({
          	url: "db서버",
            data,
            ~~~~
          }); // ajax를 넣으면 됩니다.
        });
      }
    })
  },
  autoProcessQueue: false, // 자동업로드 여부 (true일 경우, 바로 업로드 되어지며, false일 경우, 서버에는 올라가지 않은 상태임 processQueue() 호출시 올라간다.)
  clickable: true, // 클릭가능여부
  thumbnailHeight: 120, // Upload icon size 
  thumbnailWidth: 120, // Upload icon size
  maxFiles: 1, // 업로드 파일수
  maxFilesize: 100, // 최대업로드용량 : 100MB
  paramName: 'image', // formdata 이름 설정
  parallelUploads: 1, // 동시파일업로드 수(이걸 지정한 수 만큼 여러파일을 한번에 컨트롤러에 넘긴다.)
  addRemoveLinks: true, // 삭제버튼 표시 여부
  dictRemoveFile: '삭제', // 삭제버튼 표시 텍스트
  uploadMultiple: false, // 다중업로드 기능 
  acceptedFiles: ".jpeg,.jpg,.png,.gif,.JPEG,.JPG,.PNG,.GIF",
};

 

이상 끝.

 

-업로드 체크 출처 -

https://stackoverflow.com/questions/35798497/how-to-check-if-there-is-already-an-image-in-dropzone

How to check if there is already an image in dropzone?