[Dropzone.js]게시글 제목, 내용, 사진 동시 업로드.

작동 로직은 이러합니다.

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

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

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

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

 

이전에 올려놓은 라이브러리 주소 참고하도록 하시고,

스크립트 로직을 구현해 보았습니다.

다들 form데이터에 같이 보내거나 이상하게 hidden으로 넘기고 그러고 있길래,

내 경우 img 서버 주소와 db 저장 주소가 다르기도 하고 그러다보니 쪼갤 필요가 있어

그냥 고민해보다가 이렇게 만들어 봄.

 

특이하게도 init 안에 넣어놔야 이렇게 구동되는 방식인 듯 싶습니다.

image는 그냥 이미지 서버에서 쓸 임시 이름이라 그냥 저렇게 써버렸습니다.

이미지 서버 관련은 toast ui 라이브러리 글 읽으면 내용 나옵니다. 거기선 컨트롤러도 언급되어 있어요.

원하시는 대로 바꾸시면 됩니다. 지워도 되구요.
그렇게 쓰면 이름이 어떻게 업로드 되는지는 모르겠지만요..

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

    this.on('error', function(file, errorMessage) {
      alert(errorMessage); // 업로드 에러 처리 
    });

    $('#버튼').click(() => {
      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",
};