티스토리 뷰

728x90
반응형

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);
})();



728x90
반응형

'Programming language > Angularjs(1.x)' 카테고리의 다른 글

Angular style guide  (0) 2017.06.26
gulp-ng-constant 설정  (0) 2017.06.23
JWT ( json web token ) 참고 예제  (0) 2017.06.22
angular 의 서비스  (0) 2017.05.22
yeoman angular-fullstack 명령어  (0) 2017.03.10
댓글