Upload multiple File Using angularjs with custom data for each one?

Question

I have class like this

 public class UnitDocuments
    {
        public int UnitId { get; set; }
        public int DocType { get; set; }
        public HttpPostedFileBase UpFile { get; set; }
     }

I try to build my own function to send data from html page to mvc controller using angular js

the angular js model looks like this

{"UnitId":0,"DocType":1,"UpFile":{}}]

and using angularjs directive i can fill the UpFile with uploaded data like the post Here and the model changed

[{"UnitId":0,"DocType":1,"UpFile":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAlCAYAAAAN8sr"},[{"UnitId":0,"DocType":5,"UpFile":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAlCAYAAAAN8sr"}]]

when send this to MVC Controller always get null value for UpFile

   public ActionResult Create(List<UnitDocuments> unitDocuments)
{
}

is there any way to do something like this ? i expect for each item in unitDocuments list there is a file with its related data

score 0 · Answer 1 · answered Jan 23 '17 at 09:13

You don't really need a directive and a FileReader in order to transform the selected file to a data url format as this will make it harder to send to the server. You could directly use FormData. For example let's suppose that you have in your view an HTML <form> element that represents the data in your view model:

<form id="myForm" method="post" action="/someresource/create" enctype="multipart/form-data">
    <input type="text" name="[0].UnitId" value="0" />
    <input type="text" name="[0].DocType" value="1" />
    <input type="file" name="[0].UpFile" />

    <input type="text" name="[1].UnitId" value="1" />
    <input type="text" name="[1].DocType" value="2" />
    <input type="file" name="[1].UpFile" />

    <input type="text" name="[2].UnitId" value="5" />
    <input type="text" name="[2].DocType" value="8" />
    <input type="file" name="[2].UpFile" />

    ...
</form>

Here's how you can send this information to the server using an AJAX request:

var myForm = document.getElementById('myForm');
var fd = new FormData(myForm);
$http.post(myForm.action, fd, {
    transformRequest: angular.identity,
    headers: { 'Content-Type': undefined }
})
.success(function() {
})
.error(function() {
});

mayurgnu · Answer 2 · 2018-10-04T08:52:42.580

LAYOUT PAGE

<html ng-app="myFormApp">
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<script src="~/Scripts/Demo/angular.js"></script>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
<style>
    .layout-header {
        background-color: #0090c3;
        height: 75px;
        margin-bottom: 1%;
    }
</style>
</head>
<body>
<div class="layout-header">    
</div>
<div>
    @RenderBody()
</div>
</body>
</html>

app.directive('fileUpload', function () {
return {
    scope: true,        //create a new scope
    link: function (scope, el, attrs) {
        el.bind('change', function (event) {
            var files = event.target.files;
            //iterate files since 'multiple' may be specified on the element
            for (var i = 0; i < files.length; i++) {
                //emit event upward
                scope.$emit("fileSelected", { file: files[i] });
            }
        });
    }
  };
});

INDEX.CSHTML

<div ng-controller="CTRL_Demo">
<input type="hidden" ng-model="CTRL_Demo.Id"/>
<input type="text" ng-model="CTRL_Demo.FirstName" />
<input type="text" ng-model="CTRL_Demo.LastName"/>
<input type="file" name="file" file-upload />
<button ng-click="SaveEmployee()" class="btn btn-primary">SAVE</button>
</div>

ANGULAR CONTROLLER CODE

    var app = angular.module('myFormApp', []);
    app.controller('CTRL_Demo', function ($scope, $http) {
    $scope.CTRL_Demo = {};
    $scope.CTRL_Demo.Id = 101;
    $scope.files = [];
    $scope.$on("fileSelected", function (event, args) {
        $scope.$apply(function () {
            $scope.files.push(args.file);
        });
    });

    $scope.GetUserList = function () {
        $http.get("/User/GetEmployee")
            .then(function (response) {
                console.log(response.data);
            });
    }
    $scope.GetUserList();

    $scope.SaveEmployee = function () {
        var formData = new FormData();
        formData.append("Id", $scope.CTRL_Demo.Id);
        formData.append("FirstName", $scope.CTRL_Demo.FirstName);
        formData.append("LastName", $scope.CTRL_Demo.LastName);
        for (var i = 0; i < $scope.files.length; i++) {
            formData.append("file" + i, $scope.files[i]);
        }   
        $http({
            method: 'POST',
            url: "/User/SaveEmployee",
            headers: { 'Content-Type': undefined },
            processData: false,
            contentType: false,
            data: formData,
            transformRequest: angular.identity,
        }).success(function (data, status, headers, config) {
            alert("success!");
        }).error(function (data, status, headers, config) {
            alert("failed!");
        });
    }

    $scope.uploadFile = function (files) {
        var fd = new FormData();
        fd.append("file", files[0]);

        $http.post('@Url', fd, {
            withCredentials: true,
            headers: { 'Content-Type': undefined },
            transformRequest: angular.identity
        }).success(function () {

        }).error(function () {

        });
    };
});

MVC CONTROLLER CODE

[HttpPost]
public JsonResult SaveEmployee(UserViewModel model)
{
    string _fileName = "";
    if (Request.Files.Count > 0)
    {
         var _empid = int.Parse(Request.Form["Id"]);
         var _file = Request.Files[0];
         var _fName = Request.Files["file0"].FileName;
         var _dotIndex = _fName.LastIndexOf('.');
         var _ext = _fName.Substring(_dotIndex);
         var _configpath = RequestHelpers.GetConfigurationValue("ImageUpload");
         _fileName = _empid + "_IDPROOF" + _ext;
         var _dirPath = Server.MapPath(_configpath);
         var _filePath = Server.MapPath(_configpath) + _fileName;
         if (System.IO.Directory.Exists(_dirPath))
         {
              if (System.IO.File.Exists(_filePath))
              {
                   System.IO.File.Delete(_filePath);
              }
              _file.SaveAs(_filePath);
         }
         else
         {
              System.IO.Directory.CreateDirectory(_dirPath);
              _file.SaveAs(_filePath);
         }
     }
     return Json(_IUser_Repository.GetUser(),JsonRequestBehavior.AllowGet);
}

Upload multiple File Using angularjs with custom data for each one?

2 Answers2

Linked