Upload files with AngularJS in Asp.Net MVC 5 controller

AngularJS file upload using Asp.Net MVC and angular directive having ngFileSelect attribute.

While I was working to build a web application using ASP.NET MVC 5 and AngularJS, I have to build a  file upload functionality. I then stumbled upon a couple of AngularJS directives for File upload using Angular. Here I will explain how to upload file with AngularJS and Asp.Net MVC using jQuery formData.

Add new action into your controller for upload File functionality.

 public ActionResult SaveApplicationFile(HttpPostedFileBase httpPostedFile, string applicantName,
            string applicantEmail)
        {
            string fileSavePath = string.Empty;
            try
            {
                if (System.Web.HttpContext.Current.Request.Files.AllKeys.Any())
                {
                    if (httpPostedFile == null)
                    {
                        //return new HttpStatusCodeResult((int)HttpStatusCode.BadRequest);
                        return Json(new { Valid = false, ErrorMessage = "No file is selected. Please select the file and try again." });
                    }
                    //Is the file too big to upload?
                    int fileSize = httpPostedFile.ContentLength;
                    var maxSizeMBs = 2;
                    var maxFileSize = maxSizeMBs * 1024 * 1024;
                    if (fileSize > (maxFileSize))
                    {
                        return Json(new { Valid = false, ErrorMessage = "Filesize of image is too large. Maximum file size permitted is " + maxSizeMBs + "MB" });
                    }
                    
                    string contentType = httpPostedFile.ContentType;
                    var dirFolder = applicantName;
                    dirFolder = RemoveWhitespace.RemoveWhitespaceLinq(dirFolder);
                    // server path
                    string tempFolderName = Server.MapPath("~/" + ConfigurationManager.AppSettings["Application.DocumentFolderName"] + "/" + dirFolder);
                    string fileName = Path.GetFileName(httpPostedFile.FileName).Trim();
                    fileName = RemoveWhitespace.RemoveWhitespaceLinq(fileName);
                    fileSavePath = Server.MapPath("~/" + ConfigurationManager.AppSettings["Application.DocumentFolderName"] + "/" + dirFolder + "/" + fileName);
                    string filePath = "/" + ConfigurationManager.AppSettings["Application.DocumentFolderName"] + "/"
                        + dirFolder + "/" + fileName; //db path
                    if (!Directory.Exists(tempFolderName))
                    {
                        Directory.CreateDirectory(tempFolderName);
                    }
                    TestApp.DataModel.FileContent fileContent = new TestApp.DataModel.FileContent();
                    fileContent.FileName = fileName;
                    fileContent.FilePath = filePath; 
                    fileContent.ContentType = contentType;
                    fileContent.CreatedBy = applicantName;
     // save in db fileContent
                    var result = serviceHelper.SaveApplicationFile(fileContent);
                    if (!result.IsExceptionOccured)
                    {
                        //save file image & pdf
                        string fileExt = Path.GetExtension(httpPostedFile.FileName).ToUpper();
                        if (httpPostedFile != null && httpPostedFile.ContentLength > 0 &&
                            (fileExt == ".PDF" || fileExt == ".DOC" || fileExt == ".DOCX"))
                        {
                            httpPostedFile.SaveAs(fileSavePath);
                        }
                        return Json(new { Valid = true, FilePath = fileSavePath });
                    }
                    else
                    {
                        return Json(new { Valid = false, ErrorMessage = result.ErrorMessage });
                    }
                }
                else
                {
                    return Json(new
                    {
                        Valid = false,
                        ErrorMessage = "Please select file to upload"
                    });
                }
            }
            catch (FileNotFoundException ex)
            {
                //NLogger.LogWrite().Info(ex.Message);
                return Json(new
                {
                    Valid = false,
                    ErrorMessage = ex.Message + " " + fileSavePath
                });
            }
            catch (Exception ex)
            {
                //NLogger.LogWrite().Info(ex.Message);
                return Json(new
                {
                    Valid = false,
                    ErrorMessage = ex.Message + " " + fileSavePath
                });
            }
        }

AngularJS Controller

Add a new js File for add a new AngularJS controller and a Directive. The file input type does not support 2 way binding, so we need to find an own solution for file uploads with AngularJS.
How to upload file using ng-file-Select attribute in angular. And save using Asp.Net MVC method on sever. We need to add headers in  angular $http post method.

$scope.SaveFile = function () {


            var formData = new FormData();
            formData.append("httpPostedFile", $scope.SelectedFileForUpload);

            //We can send more data to server using append to formData object.     
            formData.append("applicantName", $scope.applicantName); 
            formData.append("applicantEmail", $scope.applicantEmail); 

            $http.post("/Home/SaveApplicationFile", formData, {
                withCredentials: true,
                headers: { 'Content-Type': undefined },
                transformRequest: angular.identity
            }).success(function (response) {

                alert(response.ErrorMessage);
                
                $("#btnUpload").hide();
                //$("#btnUpload").prop('disabled', true);
                $scope.clearForm();
            }).error(function (error) {
                alert(error);
            })

        }

Angular Directive
ng-file-Select directive applying attribute to the html input file control, and also add $timeout for dependency injection in angularjs.

  .directive("ngFileSelect", ['$timeout', function ($timeout) {
        return {
            link: function ($scope, el) {
                el.bind("change", function (e) {
                    $scope.SelectedFileForUpload = (e.srcElement || e.target).files[0];
                   
                    var filename = $scope.SelectedFileForUpload.name; //$('input[type=file]').val().replace(/.*(\/|\\)/, '');
                    $scope.$apply(function () {
                        $scope.filename = filename;
                    });
                });
            }
        }
    }]);