How do I upload files with several records using an Angular-js http call to an MVC action method?

user_4728451 0
Viewed 43

In design, I have multi records with one file upload in tabular form.

enter image description here

in every ng-change of the file, I am getting the file and storing it into a global variable like below.

app.controller('AngController', function ($http, $scope) {

$scope.EqFiles = '';

$scope.UploadFiles = function (files) {

        $scope.EqFiles = files;
};

on every 'Add' action (plus button) I am pulling all values into one array like below

$scope.SystemAccesories = [];
$scope.Add = function () {
        var systemdetail = {};
        systemdetail.SystemAcsId = 0;
        systemdetail.AcsName = $scope.txtAccessoryName;
                .
                .
                .
        systemdetail.Remarks = $scope.txtSysRemarks;
        if ($scope.EqFiles.length != 0) {

            systemdetail.ManualFile = $scope.EqFiles;
            systemdetail.IsManualFileAvailable = true;
        }
        else {
            systemdetail.IsManualFileAvailable = false;
        }

        $scope.SystemAccesories.push(systemdetail);
    };

at final I am sending it to the MVC controller's method

$http({
        method: 'POST',
        url: '/Equipment/UpdateEquipment',
        data: { EquipmentAllFields: scope.SystemAccesories },
        headers: { 'content-type': 'application/json' }
      }).then(function (response) {
                
      });

with the below parameters.

public class SystemAccessories
    {
        public int SystemAcsId { get; set; }
        public string AcsName { get; set; }
                .
                .
                .
        public string Remarks { get; set; }
        public Nullable<bool> IsManualFileAvailable { get; set; }
        public HttpPostedFileBase ManualFile { get; set; }
    }

on c# side getting all text values as expected but all 'ManualFile' parameters getting null values. so how to catch it then I can store with exact related data.

angularjs asp.net-mvc
1 Answers

in every ng-change of the file, I am getting the file and storing it into a global variable like below in the form of Base64 Serialization.

    $scope.UploadSysFiles = function (event, sysAccId, rowIndex) {
            var file = event.target.files;
            if (file[0].size < 5000000) {
                var reader = new FileReader();
                reader.readAsDataURL(file[0]);
                reader.onload = () => {
                    $scope.SysFileByteCode = reader.result;
                };
                cntSysMan = file.length;
                $scope.SysFiles = file[0];
                setTimeout(function () {
                    if (sysAccId === 0 && rowIndex !== -1) {
                        if (cntSysMan != 0) {
                            $scope.editedEquipmentList.SystemAccesories[rowIndex].ManualFile = $scope.SysFileByteCode;
                        }
                    }
                    else if (sysAccId !== 0 && rowIndex !== -1) {
                        if (cntSysMan != 0) {
                            if ($window.confirm("Do you really like to replace the file '" + $scope.editedEquipmentList.SystemAccesories[rowIndex].FileName + "' by '" + $scope.SysFiles.name + "' ?")) {
$scope.editedEquipmentList.SystemAccesories[rowIndex].ManualFile = $scope.SysFileByteCode;
                            }
                        }
                    }
                }, 3000);
            }
            else {
                alert('File size exceeded');
            }
        };

set time out to get the file because after getting the image to converting it to base64 and on-load event fire.

at final I am sending it to the MVC controller's method

$http({
        method: 'POST',
        url: '/Equipment/UpdateEquipment',
        data: { EquipmentAllFields: scope.SystemAccesories },
        headers: { 'content-type': 'application/json' }
      }).then(function (response) {
                
      });

MVC Controller

[HttpPost]
        public ActionResult UpdateEquipment(EquipmentAllFields objEquipmentAllFields)
        {.
         .
         .
         foreach (var systemAcs in objEquipmentAllFields.objSystemAcs)
         {
          string removedAcsUnwantedString = systemAcs.ManualFile.Substring(systemAcs.ManualFile.LastIndexOf(',') + 1);
          var base64AcsEncodedBytes = Convert.FromBase64String(removedAcsUnwantedString);
          System.IO.File.WriteAllBytes(severFilePath + newFile, base64AcsEncodedBytes);
         }
         . 
         .
        }
user_47284510
Related