dropzone 사용법 SPRING MVC 다중파일 멀티파일

dropzone 사용법 SPRING MVC 다중파일 멀티파일

dropzone 사용법 SPRING MVC 다중파일 멀티파일

웹프로그램 제작시 파일을 여러개 올리고 받아야할 경우가 발생해요.

이경우 dropzone라는 라이브러리를 사용하면 편리하게 구현할수 있어요.

https://www.dropzonejs.com/

사이트로 이동해서 라이브러리 파일을 다운로드 받아요.

저는 게시판에 dropzone를 달았어요.

날짜 제목 내용 ${mt_content} 파일첨부

summernote와 같이 사용하고 있었는데요.

dropzone.css와 dropzone.js를 선언해요.

그리고 $(document).ready(function() 로 dropzone에 대한 설정을 해요.

Dropzone.autoDiscover = false; $(document).ready(function() { edit_mode_note(); //$("div#my_file_upload").dropzone({ url: "/editor/file_upload" }); $(".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; $("div#my_file_upload").dropzone({ url: "/editor/file_uploads" , addRemoveLinks : true, maxFilesize : 256, dictResponseError: 'Error uploading file!', headers: { 'X-CSRF-TOKEN': $("#csrf_token").val() , uid : $('#i_uid').val() }, params: { uid: $('#i_uid').val() }, uploadMultiple : true, thumbnailWidth: 180, thumbnailHeight: 120, parallelUploads: 100, maxFiles: 255, autoProcessQueue : true, accept: function(file, done) { if (file.name == "") { done("제한사항 없어도 될듯 한뎅?"); } else { done(); } }, init : function() { var myDropzone = this; var count = myDropzone.options.maxFiles; var url = "/editor/file_list"; var data = JSON.stringify({ uid : $('#i_uid').val() }); var callback_init=function (data) { if (data.data != '' && data.data != undefined) { var existingFileCount = 0; $.each(data.data, function (index, item) { var mockFile = { name: item.mt_filename, size: item.mt_contentlength, seq: item.idx }; var filePath = "/editor/get_editor_thumbnail_image/?idx="+item.idx; myDropzone.emit("addedfile", mockFile); myDropzone.emit("thumbnail", mockFile, filePath); myDropzone.emit("success", mockFile); myDropzone.emit("complete", mockFile); myDropzone.files.push(mockFile); //file.previewElement.classList.add("dz-processing"); //sms; //file.previewElement.classList.add("dz-complete"); existingFileCount = existingFileCount + 1; }); myDropzone.options.maxFiles = myDropzone.options.maxFiles - existingFileCount; } }; getPostData(url,data,callback_init); this.on("maxfilesexceeded", function (file) { showmessage("알림","한번에 올릴수 있는 파일의 갯수 제한을 넘었습니다",2000,''); myDropzone.removeFile(file); }); this.on("success", function( file, resp, formData ){ existingFileCount=0; var type = $("#"+id).data("type"); if(resp != null && resp != '' && resp != undefined) { if(resp.data != null && resp.data != '' && resp.data != undefined) { var existingFileCount = 0; $.each(resp.data, function(){ if(this.mt_filename==file.name) { file.previewElement.appendChild(Dropzone.createElement("")); existingFileCount = existingFileCount + 1; } }); } } if(file.seq != null && file.seq != '' && file.seq != undefined) { file.previewElement.appendChild(Dropzone.createElement("")); } }); this.on("removedfile", function (data) { var id = $(data.previewElement).find('input[name=fileId]').val(); var sql_state_value = 'delete'; var data = JSON.stringify({ sql_state : sql_state_value , idx : id , uid : $('#i_uid').val() , mt_input_id : $('#login_mt_id').val() , mt_update_id : $('#login_mt_id').val() }); var url ='/editor/editor_note_delete_img'; getPostData(url,data,null); myDropzone.options.maxFiles = myDropzone.options.maxFiles + 1; if(count < myDropzone.options.maxFiles) myDropzone.options.maxFiles = count; }); } }); $('.push').click(function() { $('.dropzone').each(function() { alert("어휴."); }); }); });

headers: {

'X-CSRF-TOKEN': $("#csrf_token").val()

, uid : $('#i_uid').val()

},

스프링부트 사용시 csrf-token을 headers에 넣어주시면 되요.

스프링쪽 컨트롤러는 /file_uploads는 이렇게 만들었어요.

//멀티파일.. @ResponseBody @RequestMapping(value ="/file_uploads", method=RequestMethod.POST, produces = "application/json;charset=UTF-8") public Map>> file_uploads(MultipartFile nfile,MultipartHttpServletRequest request)throws Exception{ String uid=null; Map paramMap1=request.getParameterMap(); Iterator keyData1 = paramMap1.keySet().iterator(); while (keyData1.hasNext()) { String key = ((String)keyData1.next()); String[] value = paramMap1.get(key); logger.info("key : " + key + ", value : " + value[0].toString()); if(key.equals("uid")) { uid=value[0].toString().trim(); } } Map paramMap = request.getFileMap (); Iterator keyData = paramMap.keySet().iterator(); CommonData dto = new CommonData(); Map>> result = new HashMap<>(); List> data_list = new ArrayList(); while (keyData.hasNext()) { Map data = new HashMap<>(); String key = ((String)keyData.next()); MultipartFile file = paramMap.get(key); file_upload_ex(dto, data, file,uid); //return ResponseEntity.ok().body(result); data_list.add(data); dto.clear(); } result.put("data", data_list); return result; }

file_upload_ex부분은 이렇게 만들었어요.

private String file_upload_ex(CommonData dto, Map result, MultipartFile file, String uid) throws IOException, Exception { logger.info("originalName: " + file.getOriginalFilename()); MediaUtils MediaUtils = new MediaUtils(); String formatName = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")+1); MediaType mType = MediaUtils.getMediaType(formatName); if(mType!=null) { UploadFileUtils f_util = new UploadFileUtils(); BufferedImage descimg = f_util.cropImageSquare(file.getBytes()); BufferedImage srcImg = ImageIO.read(file.getInputStream()); BufferedImage destImg = Scalr.resize(srcImg, Scalr.Method.BALANCED, 180,180 ,Scalr.OP_ANTIALIAS); ByteArrayOutputStream baos = new ByteArrayOutputStream(); boolean foundWriter = ImageIO.write(destImg, "png", baos); baos.flush(); byte[] imageInByte = baos.toByteArray(); dto.put("mt_s_data", imageInByte); baos.close(); } dto.put("mt_filename",file.getOriginalFilename()); dto.put("mt_type",file.getContentType()); dto.put("mt_contentlength",file.getBytes().length); dto.put("mt_data", file.getBytes()); dto.put("uid", uid); z_service.insert(dto, "File_UpDown_Mapper.insert_editor_image_upload"); int idx= z_service.listSearchCount(dto, "File_UpDown_Mapper.select_editor_image_upload"); result.put("result", "UPDATE_OK"); String url = "/editor/get_editor_image/?idx="+idx; String id = ""+idx; result.put("url", url); result.put("id", id); result.put("fileId", id); result.put("mt_filename", file.getOriginalFilename()); result.put("mt_type", file.getContentType()); result.put("formatName", formatName); result.put("uid", uid); return id; }

/file_list 쪽 컨트롤러 에요.

@RequestMapping("/file_list") public Map>> file_list(@RequestBody CommonData dto) throws Exception { Iterator keyData = dto.keySet().iterator(); while (keyData.hasNext()) { String key = ((String)keyData.next()); String value = dto.get(key); logger.info("key : " + key + ", value : " + value); } List> list = z_service.select(dto, "File_UpDown_Mapper.get_editor_image_uid_list"); Map>> result = new HashMap<>(); result.put("data", list); return result; }

/get_editor_thumbnail_image 컨트롤러 에요.

@RequestMapping(value = "/get_editor_thumbnail_image", method = RequestMethod.GET) public ResponseEntity get_thumbnail_image(HttpServletRequest request, Model model) throws Exception { MediaUtils MediaUtils = new MediaUtils(); Map paramMap=request.getParameterMap(); Iterator keyData = paramMap.keySet().iterator(); CommonData dto = new CommonData(); while (keyData.hasNext()) { String key = ((String)keyData.next()); String[] value = paramMap.get(key); dto.put(key, value[0].toString()); logger.info("key : " + key + ", value : " + value[0].toString()); } List> result_list; result_list=z_service.select(dto,"File_UpDown_Mapper.get_editor_thumbnail_image"); /* if(result_list.size() < 1) { dto.put("idx", "108"); result_list=z_service.select(dto,"File_UpDown_Mapper.get_editor_image"); } */ logger.info(""+result_list.size()); if(result_list.size() > 0) { Iterator list_object = result_list.iterator(); Map e_object = (Map) list_object.next(); String idx = e_object.get("idx").toString(); String mt_filename = (String)e_object.get("mt_filename"); byte[] mt_data = (byte[])e_object.get("mt_s_data"); HttpHeaders headers = new HttpHeaders(); mt_filename = URLEncoder.encode(mt_filename,"UTF-8"); //response.setContentType("application/ms-excel; charset=UTF-8"); //response.setCharacterEncoding("UTF-8"); // response.setHeader("Content-Disposition","attachment; filename="+mt_filename); String formatName = mt_filename.substring(mt_filename.lastIndexOf(".")+1); MediaType mType = MediaUtils.getMediaType(formatName); if(mType != null){ headers.setContentType(mType); }else{ String icon_idx= "1"; formatName = formatName.toUpperCase(); if(formatName.equals("TXT")) { icon_idx = "9"; } else if(formatName.equals("XLS")||formatName.equals("XLSX")||formatName.equals("XLSM")||formatName.equals("XLSB")||formatName.equals("XLTX")||formatName.equals("XLTM")) { icon_idx = "2"; } else if(formatName.equals("MP3")) { icon_idx = "3"; } else if(formatName.equals("MP4")) { icon_idx = "4"; } else if(formatName.equals("PDF")) { icon_idx = "5"; } else if(formatName.equals("PPT")||formatName.equals("PPTX")) { icon_idx = "6"; } else if(formatName.equals("XML")) { icon_idx = "7"; } else if(formatName.equals("ZIP")) { icon_idx = "8"; } else if(formatName.equals("DOC")) { icon_idx = "10"; } dto.put("idx", icon_idx); result_list=z_service.select(dto,"File_UpDown_Mapper.get_editor_thumbnail_image"); if(result_list.size() > 0) { list_object = result_list.iterator(); e_object = (Map) list_object.next(); idx = e_object.get("idx").toString(); mt_filename = (String)e_object.get("mt_filename"); mt_data = (byte[])e_object.get("mt_s_data"); headers = new HttpHeaders(); formatName = mt_filename.substring(mt_filename.lastIndexOf(".")+1); mType = MediaUtils.getMediaType(formatName); if(mType != null){ headers.setContentType(mType); } } } return new ResponseEntity(mt_data, headers,HttpStatus.OK); } return new ResponseEntity(HttpStatus.BAD_REQUEST); }

저는 위에 등록된파일들을 썸네일 아이콘으로 등록해뒀어요. 파일종류에 따라서 아이콘을 다르게 보이게 할려구요.

/editor_note_delete_img 파일 삭제 컨트롤러 에요.

@RequestMapping("/editor_note_delete_img") public Map editor_note_delete_img(@RequestBody CommonData dto) throws Exception { Map paramMap = new HashMap<>(); Iterator keyData = dto.keySet().iterator(); while (keyData.hasNext()) { String key = ((String)keyData.next()); String value = dto.get(key); logger.info("key : " + key + ", value : " + value); } z_service.update(dto, "File_UpDown_Mapper.editor_note_delete_img"); paramMap.put("result", "IMAGE_DELETE_OK"); return paramMap; }

파일다운로드는 게시판을 읽어올때 받아와요.

${mt_subject} ${mt_wdate} ${mt_content} 첨부파일 다운로드 ${file_list.mt_filename}

첨부파일 다운로드에서 파일리스트를 가져와서 뿌려주고 아이콘을 클릭하면 다운로드 되요.

@RequestMapping(value = "/get_editor_image", method = RequestMethod.GET) public ResponseEntity get_image(HttpServletRequest request, Model model) throws Exception { MediaUtils MediaUtils = new MediaUtils(); Map paramMap=request.getParameterMap(); Iterator keyData = paramMap.keySet().iterator(); CommonData dto = new CommonData(); while (keyData.hasNext()) { String key = ((String)keyData.next()); String[] value = paramMap.get(key); dto.put(key, value[0].toString()); logger.info("key : " + key + ", value : " + value[0].toString()); } List> result_list; result_list=z_service.select(dto,"File_UpDown_Mapper.get_editor_image"); logger.info(""+result_list.size()); if(result_list.size() > 0) { Iterator list_object = result_list.iterator(); Map e_object = (Map) list_object.next(); String idx = e_object.get("idx").toString(); String mt_filename = (String)e_object.get("mt_filename"); mt_filename = URLEncoder.encode(mt_filename,"UTF-8"); byte[] mt_data = (byte[])e_object.get("mt_data"); HttpHeaders headers = new HttpHeaders(); String formatName = mt_filename.substring(mt_filename.lastIndexOf(".")+1); MediaType mType = MediaUtils.getMediaType(formatName); if(mType != null){ headers.setContentType(mType); }else{ mt_filename = new String(mt_filename.getBytes("UTF-8"), "ISO-8859-1"); headers.setContentType(MediaType.APPLICATION_OCTET_STREAM); headers.add("Content-Disposition", "attachment;filename=\""+mt_filename+"\";"); headers.add("Content-Transfer-Encoding", "binary"); } return new ResponseEntity(mt_data, headers,HttpStatus.OK); } return new ResponseEntity(HttpStatus.BAD_REQUEST); }

이상으로 dropzone.js를 사용하여 파일을 업로드 삭제 하고 다운로드 하는 것을 해보았어요.

from http://s00741.tistory.com/193 by ccl(A) rewrite - 2020-03-12 19:54:32

댓글

댓글 쓰기

이 블로그의 인기 게시물

데이터 바인딩 추상화 - propertyEditor

데이터 바인딩 추상화 - propertyEditor 데이터 바인딩 org.springframework.validation.DataBinder java.beans.PropertyEditor https://docs.spring.io/spring/docs/current/javadoc-api/org/springframework/validation/DataBinder.html WEB MVC에만 특화된 것이 아니라 여러 곳에서 쓰이는 스프링 핵심 기술 기술적인 관점 프로퍼티 값을 타겟 객체에 설정하는 기능 사용자 관점 사용자 입력값을 애플리케이션 도메인 모델에 동적으로 변환해 넣어주는 기능. 입력값은 대부분 "문자열"인데, 그 값을 객체가 가지고 있는 int, long, Boolean, Date 등 심지어 Event, Book 같은 도메인 타입으로도 변환해서 넣어주는 기능. PropertyEditor public class EventEditor extends PropertyEditorSupport{ @Override public String getAsText() { Event event = (Event)getValue(); return event.getId().toString(); } @Override public void setAsText(String text) throws IllegalArgumentException { setValue(new Event(Integer.parseInt(text))); } } 스프링 3.0 이전까지 DataBinder 가 변환 작업 사용하던 인터페이스 getValue 는 PropertyEditorSupport 가 받은 객체를 가져올 수 있다. getValue와 setValue는 객체를 공유 하고 있으며 PropertyEditor가 가지고 있는 값 이다. 서로 다른 쓰레드에 공유 를 한다.( 쓰레드-세이프 하지 않음 ) Bean 으로 등록해서 쓰지 말아야 한다. Ob...
자세한 내용 보기

[sts] spring boot groovy 적용 실행 하기

[sts] spring boot groovy 적용 실행 하기 spring boot 프로젝트를 진행하며 groovy를 적용하였다. intellij로 설정하는 것은 쉬웠는데 이클립스에 적용하려니 여간 어려운게 아니였다. 한단계 성장함. 1. spring starter 프로젝트 생성 2. pom.xml 내용 추가 org.projectlombok lombok true provided org.spockframework spock-core 1.2-groovy-2.4 test org.spockframework spock-spring 1.2-groovy-2.4 org.codehaus.groovy groovy-all 2.4.15 org.junit.jupiter junit-jupiter-api test org.junit.jupiter junit-jupiter-engine test org.assertj assertj-core test org.springframework.boot spring-boot-starter-web org.springframework.boot spring-boot-starter-test test org.junit.vintage junit-vintage-engine com.h2database h2 3. 이클립스 플러그인 추가 사이트에 접속하여 최신 버젼 링크를 복사 후 window -> help -> install new software -> add -> location에 링크 붙여넣기 -> 체크리스트 전부 체크후 next 2번 -> I accept.... -> sts restart 4. src/test/java/에 테스트이름.groovy를 생성한다. 5. 프로젝트 우클릭 - Build Path - New Source Folder에 아래 폴더를 추가해준다. (해당 패키지가 원래 있었다면 이 과정 생략 가능) 6. .groovy 우클릭 - R...
자세한 내용 보기

2020 LCK 롤챔스 Spring 경기 재개 및 일정

2020 LCK 롤챔스 Spring 경기 재개 및 일정 2020 LCK 스프링이 3월 6일을 마지막으로 코로나19 확산 방지를 위해 중단되었었지만, 오늘 3월 25일을 시작으로 재개되었다. https://kr.leagueoflegends.com/ko-kr/news/esports/2020-lckga-dolaopnida/ (2020-lckga-dolaopnida ?) 스프링 정규 리그는 4월 16일에 종료 되며, 주 5일 2 match씩 진행하였던 기존 일정과 다르게 하루에 세 match씩 진행하게 된다. 첫 경기는 17시 시작에서 15시 시작으로 변경되었으며 앞선 경기가 끝나면 바로 뒷 경기가 이어진다. 1R 경기는 오프라인 무관중 경기로 진행했었으나 2R 경기는 온라인으로 진행된다. 또한 LCK 분석 데스크는 하지 않는 것으로 결정되었다. 오늘 경기를 보면, Pro View나 경기 후 MVP 인터뷰는 유지되는 것으로 보인다. from http://blog.lockcept.kr/103 by ccl(A) rewrite - 2020-03-25 20:54:27
자세한 내용 보기