dropzone 예제

1. js, css 받아오기

dropzonejs.com에서 dropzone 구현에 필요한 js와 css를 내려받고 프로젝트에 추가한다.
아래 dist folder를 받으면 css와 js가 들어있다.

2. custom dropzone.js 만들기

var WafflepenDropzone = {
   set : function( formId, btnId ) {
      
        //dropzone 세팅
       var myDropzone = new Dropzone('#' + formId, {
            url : API_URL +"/file/uploadfile",
            autoProcessQueue: false,            //자동 업로드
            paramName: "file",                  //전송받는 파일 파라미터명
            addRemoveLinks: true,
            acceptedFiles: "application/pdf",   //파일 종류
            uploadMultiple: true,               //다중 파일 업로드
            parallelUploads: 10,                //동시 업로드 파일 개수
            maxFilesize: 10,                    //최대 파일 사이즈 (MB)
            maxFiles: 10,                       //첨부 개수
            params: {
                "EMAIL" : "yunsd@careercare.co.kr",//global.userInfo.EMAIL,
                "FILETYPE" : "pdf"
            },
            init : function(){

                var myDropzone = this;
                
                /*파일 전송*/
                $("#"+btnId).on('click', function () {
                    myDropzone.processQueue();
                });

                /*최대 허용 파일 개수보다 많이 올린 경우 제어*/
                myDropzone.on("addedfile", function(event) {
                    while (this.files.length > this.options.maxFiles) {
                        this.removeFile(this.files[0]);
                    }
                });

                /*팡리 전송이 완료되면 목록에있는 파일 제거*/
                myDropzone.on("complete", function(file) {
                    myDropzone.removeFile(file);
                });
            }
        });
    }
}

3. custom dropzone.js 사용(main.jsp)

script

<!--dropzone file-->
<link rel="stylesheet" href="/resources/common/css/dropzone/dropzone.css">
<link rel="stylesheet" href="/resources/common/css/dropzone/basic.css">
<script src="/resources/common/js/dropzone/dropzone.js"></script><%--original dropzone--%>
<script src="/resources/front/js/wafflepen.dropzone.js"></script><%--커스텀 파일--%>
<!--dropzone file-->

//dropzone 자동생성 false
Dropzone.autoDiscover = false;
//dropzone 생성  : (FormId, UploadButtonId)
WafflepenDropzone.set('uploads', 'submitFiles');

html

<!--dropzone  시작-->
<div>
   <form class="dropzone" id="uploads" enctype="multipart/form-data">
   </form>
   <button id="submitFiles">Upload</button>
</div>
<!--dropzone 종료-->

3. FileController.java (back)

import kr.co.careercare.highlight.controller.dashboard.DashboardController;
import org.apache.log4j.Logger;
import org.springframework.beans.factory.annotation.Autowired;
import kr.co.careercare.highlight.services.file.IFileService;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartHttpServletRequest;

import java.util.HashMap;

/**
 * @author yunsd
 * @date   2019.01.16
 * @Desc dropzone에서 파일을 전송한다.
 */

@Controller
@RequestMapping("/file")
@CrossOrigin
public class FileController {

    @Autowired
    IFileService fileServiceImpl;

    private static final Logger logger = Logger.getLogger(DashboardController.class);

    /* PDF 등록 yunsd@20190115 */
    @RequestMapping(value = "/uploadfile", method = RequestMethod.POST)
    public @ResponseBody
    HashMap<String, Object> upload(MultipartHttpServletRequest request, @RequestParam HashMap<String, Object> parameter){
        return fileServiceImpl.uploadFile(request, parameter);
    }

}

3. IFileService.java

public interface IFileService {

    /* PDF 등록 yunsd@20190103 */
    HashMap<String, Object> uploadFile(MultipartHttpServletRequest request, HashMap<String, Object> parameter);
}

3. FileServiceImpl.java

@Service
public class FileServiceImpl implements IFileService {

    @Autowired
    FileDao fileDao;

    @Autowired
    AmazonApi amazonApi;

    @Autowired
    ICommon commonImpl;

    @Autowired
    Environment env;

    /* PDF 등록 yunsd@20190115 */
    @Override
    @Transactional(value="transactionManager")
    public HashMap<String, Object> uploadFile(MultipartHttpServletRequest request, HashMap<String, Object> parameter) {
        HashMap<String,Object> resultMap = new HashMap<String, Object>();

        // Getting uploaded files from the request object
        Map<String, MultipartFile> fileMap = request.getFileMap();

        //파일 정보 저장용도
        ArrayList<HashMap<String,Object>> ArrFilesInfo = new ArrayList<HashMap<String,Object>>();
        HashMap<String,Object> sendParam = new HashMap<String,Object>();

        // Iterate through the map
        for (MultipartFile multipartFile : fileMap.values()) {

            //'저장용 맵'
            HashMap<String,Object> param = new HashMap<String,Object>();

            /*파일 기본 정보 추출*/
            HashMap<String, Object> fileInfo = getUploadedFileInfo(multipartFile);

            //파일 이름 추출 (확장자 제거)
            String fName = FilenameUtils.getBaseName((String)fileInfo.get("fileName"));
            param.put("ORI_NAME",fName);

            //파일 이름 암호화 및 '저장용 맵'에 담기
            String md5Name = commonImpl.hashMD5(fName);
            param.put("ENCODED_NAME",md5Name);

            //S3에 파일 업로드
            String timeString = String.valueOf(System.currentTimeMillis());
            String rename    = timeString + "." + parameter.get("FILETYPE");
            String path = null;
            try {
                path = amazonApi.uploadS3("data/"+parameter.get("EMAIL")+"/pdf"
                        , rename
                        , new ByteArrayInputStream(multipartFile.getBytes()));
            } catch (IOException e) {
                e.printStackTrace();
            }

            //URL_KEY (임시 지정)
            param.put("URL_KEY", commonImpl.hashMD5(env.getProperty("host")));
            param.put("URL", env.getProperty("host"));

            //저장소 경로
            param.put("REPOSITORY_URL", path);
            //유저 메일
            param.put("USER_EMAIL",parameter.get("EMAIL"));
            //파일 타입 추출(확장자)
            param.put("FILE_TYPE",parameter.get("FILETYPE"));

            ArrFilesInfo.add(param);

        }
        //mybatis foreach를 위해 array를 param에 담는다.
        sendParam.put("FILEPARAM",ArrFilesInfo);

        int result = 0;
        //파일 정보 등록 (tbl_files)
        result = fileDao.uploadFile(sendParam);
        //사이트 정보 등록 (tbl_site)
        result = fileDao.insertSiteForFiles(sendParam);

        if(result > 0){
            resultMap.put("RESULT", "SUCCESS");
        } else {
            resultMap.put("RESULT", "FAIL");
        }
        return resultMap;
    }

    /*fileMap에서 파일 정보 추출*/
    private HashMap<String, Object> getUploadedFileInfo(MultipartFile multipartFile){

        HashMap<String, Object> fileInfo = new HashMap<String, Object>();
        fileInfo.put("fileName",multipartFile.getOriginalFilename());
        fileInfo.put("fileSize",multipartFile.getSize());
        fileInfo.put("fileContentType",multipartFile.getContentType());

        return fileInfo;
    }
}