귀찬항요

세상에 공짜보다 좋은게 없으므로

스프링 프레임워크를 사용한 웹페이지에 네이버 스마트 에디터를 적용하도록 하겟다.

사실 에디터 적용은 잭스도 할수있는일이니 사진 퀵 업로더가 주 내용이다.

나는 개발서버에서의 에디터 위치를 /resource/SE 로 설정하였다.

사실 플러그인 설치와 버튼 추가는 설명도 잘 되있을 뿐더러

이미 적용되어 있더라 ㅡ,.ㅡ 손댈것이 없다.

업로드용 javascript를 수정해야한다.

/resource/SE/photo_uploder/popup/attach_photo.js

callFileUploader 이건 html5를 사용하지않는 업로드용이라는데 이걸 기준으로 해보겠다.

request를 전송할 주소를 만들어준다.

나는 아래와같은 주소로 POST 형식으로 파일을 받을거다.

sCallback은 스프링에서는 지워줘도 될거같다.

놔둬봐야 쓸모업는 페이지 한번 더읽는거같다.

sUrl  : 'http://localhost:8080/web/imageUpload.gm'

파일업로드를하는데 대체 어디다 담아올릴건지 확인을 안했다.

사진업로드할때 나오는 팝업인 photo_uploader.html 파일을 살펴보면 Filedata 라는 이름을 찾을수 있다.

이 이름으로 파일을 받아서 저장하고해야하며 또 중요한건 파일을 올릴때 별도의 콜백함수이름을 같이 보내준다는거다.

결론은 파일이름,콜백함수명 두개를 화면으로 다시 가져와야한다.

나는 callBack.jsp 를 새로 만들었다.

 @RequestMapping(value = "/imageUpload.gm", method = RequestMethod.POST)
 public String writeBoard(Locale locale, Model model,HttpServletRequest request) {
  logger.info("Welcome imageUpload!! The client locale is {}.", locale);
  
  String filename = "";
  String filenameFront = "";
  String filenameExt = "";
  String convFilename = "";
  FileSystemResource uploadDir = new FileSystemResource("E:/APPLICATION/STC/vfabric-tc-server-developer-2.9.3.RELEASE/base-instance/wtpwebapps/gm_spring_mvc/resources/uploadimages/");
  
  MultipartHttpServletRequest multipart = (MultipartHttpServletRequest) request;
  MultipartFile file = multipart.getFile("Filedata");
  String callBack = multipart.getParameter("callback_func");
  if(!file.isEmpty()) {
   
   filename = file.getOriginalFilename();
   filenameFront = filename.substring(filename.lastIndexOf("."));
   filenameExt = filename.substring(filename.lastIndexOf("."),filename.length());
   //convFilename = Tool.getCurrentDayTimeMill() + filenameExt;
   convFilename = "";
   logger.info("OriginalFilename : {}", filename);
   logger.info("OriginalFilename front : {}", filenameFront);
   logger.info("OriginalFilename ext : {}", filenameExt);
   logger.info("uploadDir : {}", uploadDir.getPath());
   
   try {
    if(file.getSize() > 0){
     File out = new File(uploadDir.getPath() + "/" + Tool.getCurrentDayTimeMill() + filenameExt);
     FileCopyUtils.copy(file.getBytes(), out);
     convFilename = out.getName();
     logger.info("ConvertFilename : {}", convFilename);
    }
   } catch (IOException e) {
    e.printStackTrace();
   }
  
  }

  model.addAttribute("filename", convFilename);
  model.addAttribute("callback_func", callBack);

  return "/util/callback";
 }

이러면 파일이 저장된 후 파일이름과 콜백함수명을 callBack.jsp로 뱉어준다.

기존 에디터 샘플에있는 callBack.html 을 내jsp경로(/util/)로 옮겨주고 일부 내용만 수정해준다.

var oParameter = {callback_func:"${callback_func}",sFileName : "${filename}",sFileURL : "http://localhost:8080/web/resources/uploadimages/${filename}",bNewLine : true }; // query array

뭐 더이상의 설명은 생략한다.

결과물.

먼저 스프링 환경변수를 추가한다.

속성은 업로드사이즈 20메가 제한만 두었다.

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="20000000"></property>
</bean>

두번째 CommonsMultipartResolver 는 스프링 설치시 포함되지 않은 두개의 라이브러리를 요구한다.

http://commons.apache.org/proper/commons-fileupload/

세번째 컨트롤러에서 파일업로드를 처리한다.

내경우 실제 운영용서버는 라즈베리파이이며 웹서버가 별개이기때문에 파일경로관련하여 각별히 신경써야한다.

내소스 발췌

 @RequestMapping(value = "/write.gm", method = RequestMethod.POST)
 public String writeBoard(Locale locale, Model model,HttpServletRequest request) {
  logger.info("Welcome board write insert!! The client locale is {}.", locale);
  
  String filename = "";
  String filenameFront = "";
  String filenameExt = "";
  String convFilename = "";
  FileSystemResource uploadDir = new FileSystemResource("E:/APPLICATION/STS/vfabric-tc-server-developer-2.9.3.RELEASE/base-instance/wtpwebapps/gm_spring_mvc/WEB-INF/uploadfiles/");
  //FileSystemResource uploadDir = new FileSystemResource("/var/www/web/uploadfiles/"); //운영시스템용
  MultipartHttpServletRequest multipart = (MultipartHttpServletRequest) request;
  MultipartFile file = multipart.getFile("fileupload");
  
  if(!file.isEmpty()) {
   
   filename = file.getOriginalFilename();
   filenameFront = filename.substring(filename.lastIndexOf("."));
   filenameExt = filename.substring(filename.lastIndexOf("."),filename.length());
   convFilename = "";
   logger.info("OriginalFilename : {}", filename);
   logger.info("OriginalFilename front : {}", filenameFront);
   logger.info("OriginalFilename ext : {}", filenameExt);
   logger.info("uploadDir : {}", uploadDir.getPath());
   
   try {
    if(file.getSize() > 0){
     File out = new File(uploadDir.getPath() + "/" + Tool.getCurrentDayTimeMill() + filenameExt);
     FileCopyUtils.copy(file.getBytes(), out);
     convFilename = out.getName();
     logger.info("ConvertFilename : {}", out.getName());
    }
   } catch (IOException e) {
    e.printStackTrace();
   }
  
  }

  String location = multipart.getParameter("location") == null ? "1" : multipart.getParameter("location");
  String stringPage = multipart.getParameter("page") == null ? "" : multipart.getParameter("page");
  logger.info("location = {} / page = {}", location,stringPage);
  HashMap argument = new HashMap();
  argument.put("title", Tool.encodeHTMLSpecialChar(multipart.getParameter("title"), 2));
  argument.put("writer", Tool.encodeHTMLSpecialChar(multipart.getParameter("writer"), 2));
  argument.put("board_location", location);
  argument.put("content", multipart.getParameter("ir1"));
  argument.put("password", multipart.getParameter("password"));
  argument.put("ori_filename", filename);
  argument.put("filename", convFilename);
  boardService.insertBoard(argument);
  
  model.addAttribute("location", location);

  return board(locale,model,request);
 }

마지막으로 화면에서 form 생성시 가장 기본적인 내용.

enctype="multipart/form-data"