Upload de arquivos em angularjs e bootstrap.

uploadFile.directive.js

var moduleName = 'uploadfile'

angular.module(moduleName, [])
  .controller('UploadController', ['$scope', '$http', 'UploadFileService', function ($scope) {
    $scope.$watch('file', function (newfile, oldfile) {
      if (angular.equals(newfile, oldfile)) {
        return;
      }

      // UploadFileService.upload(newfile).then(function (res) {
      //   // DO SOMETHING WITH THE RESULT!
      //   console.log('result', res);
      // })
    });

  }])
  .directive('uploadFile', [function () {
    return {
      controller: 'UploadController',
      restrict: 'E',
      templateUrl: 'directives/uploadfile/uploadfile.html',
      scope: {
        file: '='
      },
      link: function (scope, element,  attrs) {

        scope.idFake = '#inputFile' + Math.floor(Math.random() * 10000);

        angular.element(document).ready(() => {
          $('input[id=' + scope.idFake + ']').bind('change', function (changeEvent) {
            var fileSelected = changeEvent.target.files[0];
            if (attrs.file) {
              scope.file = scope.file? scope.file: {};
              scope.file.mimitype = fileSelected.type;
              scope.file.filename = fileSelected.name;
              var reader = new FileReader();
              reader.readAsDataURL(fileSelected);
              reader.onload = () => { scope.file.file = reader.result.split(',')[1] };
            } else {
              scope.file = scope.file? scope.file: {};
              scope.filename = 'Attribute "file" on directive upload not defined!';
            }
          });
        });

        scope.$watch('file', function (newValue) {
          if (!newValue) {
            scope.file = undefined;
          }
        }, true);

        scope.clickSelectFile = function () {
          setTimeout(function () {
            $('input[id=' + scope.idFake + ']').click();
          }, 0);
        }

        scope.deleteSelectFile = function () {
          setTimeout(function () {
            $('input[id=' + scope.idFake + ']').val(null);
            scope.file = undefined;
          }, 0);
        }
      }
    }
  }]);

module.exports = moduleName

uploadfile.html

<div class="input-group">
  <span class="input-group-btn">
    <button class="btn btn-primary btn-sm" type="button" ng-click="clickSelectFile()">Buscar...
      <input id="{{idFake}}" class="{{idFake}}" ng-model="file" type="file" hidden/>
    </button>
  </span>
  <input type="text" class="form-control disabled input-sm" id="imagem" name="imagem" ng-model="file.filename" readonly/>
  <span class="input-group-btn">
    <button class="btn btn-light btn-sm" type="button" ng-click="deleteSelectFile()">
      <span class="fa fa-trash pointer"></span>
    </button>
  </span>
</div>

uploadfileService.js

var moduleName = 'uploadfileService'

angular.module(moduleName, [])
  .service('UploadFileService', ['$http', '$q', function ($http, $q) {

    return ({
      upload: upload
    });

    function upload(file) {
      var upl = $http({
        method: 'POST',
        url: 'http://jsonplaceholder.typicode.com/posts', // /api/upload
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        data: {
          upload: file
        },
        transformRequest: function (data, headersGetter) {
          var formData = new FormData();
          angular.forEach(data, function (value, key) {
            formData.append(key, value);
          });

          var headers = headersGetter();
          delete headers['Content-Type'];

          return formData;
        }
      });
      return upl.then(handleSuccess, handleError);

    } // End upload function

    // ---
    // PRIVATE METHODS.
    // ---

    function handleError(response) {
      if (!angular.isObject(response.data) || !response.data.message) {
        return ($q.reject('An unknown error occurred.'));
      }

      return ($q.reject(response.data.message));
    }

    function handleSuccess(response) {
      return (response);
    }

  }]);

module.exports = moduleName