ng-file-upload 파일 업로드~

ng-file-upload

해당 페이지에 가보면 예제가 많아서 따라해보면 바로 알 수 있다.

Amazon AWS S3 Upload 에 대한 부분도 있으니 꼼꼼히 살펴보자.

url : https://github.com/danialfarid/ng-file-upload

HTML 

- mypageCtrl 이란 명칭은  ui-router에서 controllerAs:'mypageCtrl' 으로 변경했기 

때문에 해당 MypageController가 아닌 mypageCtrl 로 접근가능한것임. 

-  css class는 bootstrap.css와 사용자 class가 혼종되어 있음을 참고.

<div class="user clearfix">
    <div class="profile-img float-lt mr15">
        <img ng-src="{{ currentUser.photoUrl }}" alt="" class="img-circle ms" id="profilePhotoImage"/>
    </div>
    <form name="profilePhotoForm" method="POST"  novalidate>
        <fieldset>
            <legend>사진 등록 폼</legend>
            <div style="position:relative;display:inline-block;vertical-align: middle;">
                <button type="button" class="btn btn-upload">사진 변경</button>
                <input type="file" value="사진 찾아보기" name="file" id="profilePhotoInput" style="cursor:pointer;"

                      <!-- ng-file-upload의 directive 부분 -->
                       ngf-select="mypageCtrl.sendProfilePhoto(file)" 
                       ng-model="file"  
                       ngf-pattern="'image/*'"
                       ngf-accept="'image/*'" 
                       ngf-max-size="20MB" 
                       ngf-min-height="100"
                       ngf-resize="{width: 100, height: 100}" />
                      <!--// ng-file-upload의 directive 부분 -->

                <label style="margin-top:4px" ng-show="fileName!==''">파일명 : {{fileName}}</label>
                <span style="display:block;margin-top:5px;font-size:12px;color:333;">
* JPG 또는 PNG / 120x120 사이즈 권장</span>
            </div>
        </fieldset>
    </form>
</div>

javascript -  업로드 관련 부분만 기재했다.

entry js파일( 진입점파일 )

//의존성 모듈 등록~ 보통 entry( 진입점 ) 파일에 의존성 모듈을 등록해 둔다.
angular.module('MyApp', [
    'ngFileUpload'
  ]).config(function(){ });

controller js파일

'use strict';

(function(){

class MypageController{

  // ng-file-upload 의존성 주입선언은 Upload 로 지정해주면 된다.
  constructor($scope, Upload, EndPoint ) {
    var that=this;
    this.$scope=$scope;
    this.Upload=Upload;
    this.EndPoint=EndPoint;

    this.$scope.currentUser={};
    this.$scope.fileName = '';
  }
 
 //업로드와 동시에 등록된 이미지 URL을 받아와서 노출 시킨다.
  sendProfilePhoto( sendFile ) {
    var baseURL=this.EndPoint.server.apiUrl;//서버 주소
    var photoFileName=angular.element('#profilePhotoInput')[0].files[0].name;
    var timestamp=(new Date()).getTime()/1000;
  
    this.Upload.upload({
      url:baseURL+'/api/users/profilePhoto',
      method: 'POST', 
      //보통 파일명은 내부규칙에 다르지만 업로드하는 이미지마다 파일명이 달라야 하므로
      // 파일명 = 지정네이밍+업로드시간+파일명 정도로 세팅하였다.
      filename: 'profile_'+timestamp+'_'+photoFileName, 
      file:sendFile
    }).then(function (res) {
      console.log('Success ', res.data );
      var imgObj=res.data;
      that.$scope.currentUser.photoUrl=imgObj.data;
      that.$scope.fileName=photoFileName;
    }, function (res) {
      console.log('Error status: ' + res.status);
    }, function (evt) {
      var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
      //console.log('progress: ' + progressPercentage + '% ', evt.config.file);
    });
  }

}
angular.module('MyApp').controller('MypageController', MypageController);
})();