Angular 파일 업로드, 다운로드 (File upload, download) 예제

노드, 앵귤러 파일 전송 미지원하기 때문에 npm 사용이 불가피하다.

파일 전송 모듈 
1. connect-multiparty
1) 구현 간단함.
2) 파일명 변경 X
3) 파일 업로드 안했을 때 가짜 파일 생성됨.
이를 처리해주는 추가 작업 필요

 2. multer
1) 구현 복잡(connect-multiparty에 비해)
2) 파일명 변경 가능
3) file 업로드 안할 경우 파일 생성 하지 않는다.

파일명을 변경해 관리할 수 있어야 보안에도 더 나을 것이다. (파일암호화 필요할 때 uuid등 통해 파일명 변경 할 수 있으니..)

ng2-file-upload 모듈 설치

app.module.ts에 FileSelectDirective, FileDropDirective import 후
declarations에 추가
FileSelectDirective : 파일 선택시 필요한 모듈
FileDropDirective: 파일 드래그 & 드롭으로 제어하고 싶을 때 필요한 모듈 (추측)

파일 업로드 사용 컴포넌트에 FileUploader 모듈 등록 후 uploader 객체 생성. 노드로 업로드 요청할 url을 등록해야 한다.
생성자에 onCompleteItem 추가. 업로드 요청 결과를 json 타입으로 받아올 수 있는 메소드. 결과를 받아와 객체에 저장한다.

FileSelectDirective 객체 따라가보면 다음과 같이 uploader 필드의 타입이 FileUploader임을 확인할 수 있다. 여기 사용하기 위해 선언하는 것으로 추측

컴포넌트에서 지정한 html 파일에 다음과 같이 파일 업로드 태그 등록.
input type : file
name : single
ng2FileSelect[uploader] : ng2 모듈 이용한 파일 업로더. 컴포넌트에 등록한 uploader 입력.

button type : button
uploadAll : ng2 업로더 모듈 메소드. 파일 업로드 해주는 것 같다.

multer 모듈 이용해 업로드 지원할 수 있는 객체 생성 후 module.exports 통해 참조 가능하게 한다.

destination : 파일 업로드 경로 지정한다. cb는 callback 
filename : 파일명을 다음과 같이 원하는대로 제어할 수 있다.
originalname : 업로드할 파일 원본명
filename : multer 이용해 가공한 파일명

요청 해결 노드 코드.  upload.single() 메소드를 요청에 추가한다.
이후 onComplete의 요청 응답을 적절히 정해서 보낸다.
기존 글쓰기에서 파일명, 가공한 파일명 더하기 위해 두개 필드 추가해 보냈다.

컴포넌트로 돌아오면 해당 업로드 요청의 결과(originalnale, filename)가 fileInfo에 할당되어 있다. 
글쓰기 요청을 할 때 그 정보를 추가해 전송하면 파일에 대한 정보도 몽고에서 확인할 수 있게 되는 것이다.

당연히 model에도 추가된 값들에 대한 처리를 해줘야 한다. (나머지는 생략)

다운로드 요청은 굉장히 간단하다.

index js 페이지에 static으로 업로드한 파일 경로를 찾을 수 있도록 등록한다.

다운로드 사용하고자 하는 컴포넌트의 템플릿에서 다음과 같이 요청한다.
target에 _blank를 넣으면 새 브라우저를 통해 요청을 수행한다. SPA(Single Page Application)이기 때문에 반드시 필요한 처리. 

다운로드 Component의 Template 파일명(1.jpg)에 다운로드 기능 걸어놓았다. 클릭하면

새 브라우저로 다운로드의 결과 확인할 수 있다.

마우스 오른쪽 클릭하면 로컬에 파일 저장또한 가능하다.

파일 업로드 페이지에 다음과 같이 코드 작성하면

파일정보를 다음과 같이 볼 수도 있다. 
span 태그를 보면 업로드 진행 정도를 표현해주는 progress (객체인가?) 또한 지원한다. 주황색 버튼의 맨 오른쪽 0을 표시하고 있는 부분인데 진행 정도를 %로 나타낸다. Upload 버튼 클릭해 요청 보내면

다음과 같이 업로드 완료 후 100%를 확인할 수 있다.

스프링으로 해야 한다면 굉장히 번거로운 일인데 굉장히 편하게 처리할 수 있다고 느꼈다.