How to Upload file using AngularJS in MVC
<p>As I am new to AngularJS, I Don't know how to upload file in MVC using AngularJS.
I am trying to upload some files without any specific type or extension, but failed.</p>

<p>I created a javascript file which have- </p>

<p>Here is serviceJS-</p>

<pre><code>    var app = angular.module("app", []);        
    app.service('FileUploadService', ['$http', function ($http) {      
            this.uploadFileToUrl = function (file,  uploadUrl) {    
            var fd = new FormData();   
            fd.append('file', file);   
            $http.post(uploadUrl, fd, {   
                transformRequest: angular.identity,   
                headers: { 'Content-Type': undefined }   
            })   
            .success(function () {   
            })    
            .error(function () {    
            });     
        }   
    }]);
</code></pre>

<p>This is controller part-</p>

<pre><code>    app.controller('FileUploadController', ['$scope', 'FileUploadService', function($scope, FileUploadService) { 
            $scope.uploadFile = function () {
            var file = $scope.myFile;
            console.log('file is ');
            console.dir(file);
            var uploadUrl = "/Home/FileUploadFromAngular";
            FileUploadService.uploadFileToUrl(file, uploadUrl);
        };
    }]);
</code></pre>

<p>And, In view page,</p>

<pre><code> &lt;script src="~/Scripts/angular.min.js"&gt;&lt;/script&gt;
&lt;script src="~/Scripts/AngScript/FileUpload.js"&gt;&lt;/script&gt;
&lt;script src="~/Scripts/angular-ui/ui-bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;div ng-controller="FileUploadController"&gt;
        &lt;input type="file" ng-model="myFile" /&gt;
        &lt;button ng-click="uploadFile()"&gt;Upload&lt;/button&gt;
    &lt;/div&gt;
</code></pre>

<p>It is taking <strong>myFile</strong> as undefined in controller. I am unable to debug this.<br>
    Thanks in advance.</p>