vladb95
6/30/2016 - 8:39 AM

Angular file upload

Angular file upload

angular.module('userModule').controller('SettingsController',setCtrl);

setCtrl.$inject=['$scope', 'FileUploader', 'API_URL'];
function setCtrl($scope, FileUploader, API_URL){
  var vm=this;

  $scope.avatar={myImage:'',myCroppedImage:'',imageEdit:false};
  
  var avatarUploader = vm.avatarUploader = new FileUploader({
        url: API_URL+'/loadavatar/',
        autoUpload: false
    });

  vm.avatarUploader.onBeforeUploadItem = function (fileItem) {
    fileItem.headers = {
      //Authorization: 'Token '+ipCookie('token')
    };
  }
  vm.avatarUploader.onCompleteItem = function(fileItem, response, status, headers) {
        vm.init();
    };


  vm.save=function(){
    
    if($scope.avatar.imageEdit){
      var file = base64ToBlob($scope.avatar.myCroppedImage.replace('data:image/png;base64,',''), 'image/jpeg');
      avatarUploader.addToQueue(file);
      avatarUploader.uploadAll();
    }
    
  }

  var avatarHandleFileSelect=function(evt) {
    var file=evt.currentTarget.files[0];
    var reader = new FileReader();
    reader.onload = function (evt) {
      $scope.$apply(function($scope){
        $scope.avatar.imageEdit=true;
        $scope.avatar.myImage=evt.target.result;
      });
    };
    reader.readAsDataURL(file);
  };

  var base64ToBlob=function(base64Data, contentType) {
        contentType = contentType || '';
        var sliceSize = 1024;
        var byteCharacters = atob(base64Data);
        var bytesLength = byteCharacters.length;
        var slicesCount = Math.ceil(bytesLength / sliceSize);
        var byteArrays = new Array(slicesCount);
         for (var sliceIndex = 0;sliceIndex <slicesCount;++sliceIndex) {
            var begin = sliceIndex * sliceSize;
            var end = Math.min(begin + sliceSize, bytesLength);
            var bytes = new Array(end - begin);
            for (var offset = begin, i = 0 ;offset < end;++i, ++offset) {
                bytes[i] = byteCharacters[offset].charCodeAt(0);
            }
            byteArrays[sliceIndex] = new Uint8Array(bytes);
        }
        return new Blob(byteArrays, {type: contentType });
    };

  angular.element(document.querySelector('#avatarInput')).on('change',avatarHandleFileSelect);
}