fileUpload.js

"use strict";

component.directive('fileupload', function () {
    return {
        restrict: 'E',

        template: '<span>' +
            '<label for="displayImg">Upload image</label>' +
            '<input type="file" id="displayImg" onchange="angular.element(this).scope().setFile(this)">' +
            '<button class="btn btn-primary" ng-click="uploadFile()">Save</button>'
            '</span>'

        replace: true,

        controller: function ($scope) {

            $scope.setFile = function (elem) {
                $scope.inputField = elem;
                $scope.file = elem.files[0];
            };

            $scope.uploadFile = function () {
                var fd = new FormData(), xhr = new XMLHttpRequest();
                fd.append("displayPic", $scope.file);
                xhr.open("POST", "file/upload/path");
                xhr.send(fd);
                $scope.inputField.value = "";
            };
        }
    };
});