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

Question

In design, I have multi records with one file upload in tabular form.
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.

Answer 1

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);
}
.
.
}