Spring 기반 웹 프로그램에서 Filepond 를 이용한 이미지 업로드 구현하기

이미지 업로드에 최적화되어 있다고 하는 Filepond 을 사용하여 업로드를 구현해보자. Filepond 다양한 Framework 에 대한 Adaptor 를 제공하고 있고 사용이 아주 편리하다. 여기에서는 jQuery 기반의 Front-End 와 Spring 기반의 Back-End  환경에서 구현하였다.

개발 및 운영 환경은 아래와 같다.

Development

• JAVA 1.8.x
• Eclipse 4.17.0
• Tomcat 8.x 
• npm 6.14.13 , webpack 4.44.1 

• HW : MacBook Pro 2019 
• macOS Big Sur 11.4
• 2.3Ghz 8Core Intel Corei9 
• 16GB 2667 Mhz DDR4
• SSD 1TB 

Server 

• Tomcat 8.5.58.0
• Open JDK 1.8.0_292-b10

• Oracle Cloud : VM.Standard.E2.1.Micro 
• CentOS Linux release 7.9.2009 (Core)
• 1 OCPU, 1GB MEMORY, 50GB Block Volume
• 1Network 0.48 Gbps

설치하기

filepond 는 npm 을 사용하여 아래와 같이 npm 을 사용하여 설치한다. (☛ Using FilePond with JavaScript 참고.)

npm 을 사용하지 않는 경우라면 Git 에서 직접 다운로드 하여 사용하면 된다. 

 
npm install filepond --save

filepond 는 유용한 여러 기능들을 플러그인 형태로 지원하고 있다. 이중에서 필수적이라고 생각되는 File Size Validation, Image Preview, media-preview  를 추가로 설치하였다.

 

npm install filepond-plugin-file-validate-size --save
npm install filepond-plugin-image-preview --save
npm install filepond-plugin-media-preview --save

사용하기

Filepond 는 Back-End 부분 즉 서버 사이드 부분을 쉽게 변경하여 사용하는 것을 지원한다. 여기에서는 업로드와 삭제의 경우만 구현하여 사용하였다. 

추가로 JWT 기반의 인증을 사용했다. (참고. Spring 기반 웹 프로그램에서 JWT 인증 사용하기 )  서버 세션을 사용하는 경우는 불필요한 코드이다. 

• 업로드(Process) 는 ⑴ multipart/form-data POST 형태로 파일을 전달하고 ⑵ 서버는 해당 요청에 대하여 파일을 저장하고 ⑶ 업로드된 파일을 구분하는 유니크한 값을 텍스트 형태로 응답한다. 
• 삭제(Revert)는 ⑴ BODY 에 텍스트 형태로 파일 구분을 위한 유니크한 값을 포함하여 DELETE 형태로 요청하고 ⑵ 서버는 해당하는 파일을 삭제하고 ⑶ 빈값을 응답한다. 

Front-End 부부은 아래같은 방법으로 구현하였다.  (☛ Setting up FilePond with jQuery 참고) 

• HTML 코드에서 파일 업로드를 위한 input tag 추가
• JavaScript 에서 FilePond 인스턴스 생성  

input Tag 에 여러가지 속성 값을 사용하여 FilePone 와 플러그인에 대한 설정이 가능하다. (☛ 이부분에 대한 명확한 문서는 발견하지 못했다)

 

// ==================================
// Utility for filepond instance create

import * as FilePond from "filepond";
import "filepond/dist/filepond.min.css";

// Import filepond plugins
import FilePondPluginFileValidateSize from "filepond-plugin-file-validate-size";
import FilePondPluginImagePreview from "filepond-plugin-image-preview";
import FilePondPluginMediaPreview from "filepond-plugin-media-preview";

// Import filepond plugin styles
import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css";


/**
 * create filefond instance
 * @param {*} renderTo 
 * @param {*} options 
 * @returns filepond instance.
 */
function createFilePond(renderTo, options) {
  options = options || {};
  // Register the plugin
  FilePond.registerPlugin(
    FilePondPluginImagePreview,
    FilePondPluginMediaPreview,
    FilePondPluginFileValidateSize
  );
  return FilePond.create(renderTo.get(0), options);
}

다음 코드는 Spring 기반의 filepond 서버 프로그램이다. (☛ Server configuration 참고)

파일을 저장하거나 삭제하는 부분은 자신의 환경에 맞게 구현하는 작업이 필요하다. 다음 코드에서는 파일 저장을 위하여 미리 구현된 코드를 사용하였다.

다음은 위의 코드를 사용하여 구현된 최종 Front-End 이다