스프링 프레임워크에 네이버 스마트 에디터 , 사진 퀵 업로더 적용하기

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

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

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

나는 개발서버에서의 에디터 위치를 /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

 

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

결과물.