Simple file upload for Angular

sample.html

<upload-file upload-url="http://google.com/">
</upload-file>

upload-file.directive.js

UploadFile.$inject = ['$parse', '$http'];
function UploadFile($parse, $http) {
    var fileToUpload;

    return {
        restrict: 'E',
        scope: {
            uploadUrl: '='
        },
        template: '<input type="file">',

        link: function(scope, element) {
            element.bind('change', function() {
                var fileToUpload = element.children()[0].files[0],
                    formData = new FormData();

                formData.append('file', file);

                $http.post(scope.uploadUrl, formData, {
                    transformRequest: angular.identity,
                    headers: {'Content-Type': undefined}
                })
                .success(function(){
                    console.log('Successful file upload');
                    element.unbind('change');
                })
                .error(function(){
                    console.log('Failed to upload file');
                });
            });
        }
    };

}

z_help.md

Help for creating this came from multiple sources:

• https://jsfiddle.net/JeJenny/ZG9re/
• http://stackoverflow.com/questions/16483873/angularjs-http-post-file-and-form-data
• https://docs.angularjs.org/api/ng/function/angular.element