Crud operation using mvc angularjs on Fileuplode

MVC Home Controller:

 [HttpPost]
        public JsonResult SaveFiles()
        {
            string description = string.Empty;
            string Message, fileName, actualFileName;
            Message = fileName = actualFileName = string.Empty;
            bool flag = false;
            if (Request.Files != null)
            {
                var file = Request.Files[0];
                actualFileName = file.FileName;
                fileName = Guid.NewGuid() + Path.GetExtension(file.FileName);
                int size = file.ContentLength;

                try
                {
                    file.SaveAs(Path.Combine(Server.MapPath("~/FileUpload"), fileName));
                                   }
                catch (Exception)
                {
                    Message = "File upload failed! Please try again";
                }

            }
            return new JsonResult { Data = new { Message = Message, Status = flag } };
        }


Directive:

mainApp.directive('ngFiles', ['$parse', function ($parse,scope) {

    function fn_link(scope, element, attrs) {
        var onChange = $parse(attrs.ngFiles);
        element.on('change', function (event) {
            onChange(scope, { $files: event.target.files });
        });
    };

    return {
        link: fn_link
    }
}]);


Angular Controller:

mainApp.controller('UploadFileController', function ($scope, $http) {

    var formdata = new FormData();
    $scope.getTheFiles = function ($files) {
        angular.forEach($files, function (value, key) {
            formdata.append(key, value);
        });
    };

    // NOW UPLOAD THE FILES.
    $scope.uploadFiles = function () {


        var request = {
            method: 'POST',
            url: '/Home/SaveFiles/',
            data: formdata,
            headers: {
                'Content-Type': undefined
            }
        };

        // SEND THE FILES.
        $http(request)
            .success(function (d) {
                alert("Success");
                angular.element(document.querySelector('#file1')).val(null);

              //  $scope.f1.$setPristine();
             //   $scope.IsFormSubmitted = false;
            })
            .error(function () {
            });
    }
});


HTML:

       ng-files="getTheFiles($files)" />




If it resolve your issue please mark as answer.