unable to upload multiple image file ng-file-upload

Question

My Html code:

<div class="col-md-6">
    <img ngf-src="!picFile.$error && picFile" style="height: 150px; width: 200px;">
    <input type="file" ngf-select ng-model="picFile" name="file"
                       accept="image/*" ngf-max-size="2MB"><b>Picture</b><br />
</div>
            
<div class="col-md-6">
    <img ngf-src="!sigFile.$error && sigFile" style="height: 150px; width: 200px;">
    <input type="file" ngf-select ng-model="sigFile" name="file"
                       accept="image/*" ngf-max-size="2MB"><b>Signature</b><br />
</div>

And My angular code

$scope.SaveNewJoinHolder = function (picFile, sigFile) {
    if (investor_validity == 1) {
        if ($scope.newJoinHolderForm.$valid) {
            if (typeof $scope.newJoinHolder.DOB == undefined) {
                $scope.newJoinHolder.DOB = null;
            }
            else {
                var datefilter = $filter('date');
                $scope.newJoinHolder.DOB = datefilter($scope.newJoinHolder.DOB, 'dd/MM/yyyy');
                $scope.newJoinHolder.birth_date = dateconfigservice.FullDateUKtoDateKey($scope.newJoinHolder.DOB);
            }
            Upload.upload(
              {
                  url: '/InvestorManagement/JoinHolder/SaveNewJoinHolder',
                  method: 'POST',
                  fields: $scope.newJoinHolder,
                  file: { picFile: picFile, sigFile: sigFile },
                  async: true

              })
              .success(function () {
                  toastr.success('Submitted Successfully');
               }).error(function () {
                  toastr.success('Failed');
               });
            }
        }
    };

I debugged the code and I got both of the file while debugging. But it is not calling my C# method

public JsonResult SaveNewJoinHolder(tblJoinHolder joinHolder, HttpPostedFileBase picFile, HttpPostedFileBase sigFile)
{
    joinHolderFactory = new JoinHolderFactory();
    
    try
    {
        joinHolder.membership_id = SessionManger.BrokerOfLoggedInUser(Session).membership_id;
        joinHolder.changed_user_id = User.Identity.GetUserId();
        joinHolder.changed_date = DateTime.Now;
        joinHolder.is_dirty = 1;
        byte[] image = new byte[picFile.ContentLength];
        picFile.InputStream.Read(image, 0, picFile.ContentLength);
        joinHolder.photo = image;

        byte[] signature = new byte[sigFile.ContentLength];
        sigFile.InputStream.Read(image, 0, sigFile.ContentLength);
        joinHolder.signature = signature;

        joinHolderFactory.Add(joinHolder);
        joinHolderFactory.Save();

        return Json(new { data = "Successfully Saved Data", success = true });

    }
    catch (Exception ex)
    {
        return Json(new { data = ex.Message, success = false });
    }
}

What is the problem here?
If I try to upload single image it is working.

Answer 1

Before version 7.2.0 you couldn't specify a map as file option so you had to do

Upload.upload(
          {
              url: '/InvestorManagement/JoinHolder/SaveNewJoinHolder',
              method: 'POST',
              fields: $scope.newJoinHolder,
              file: [picFile, sigFile],
              fileFormDataName: ['picfile', 'sigFile'],

          })

But since version 7.2.0 your original code should work. You can verify the network tab of your browser to make sure that the file form data is being sent to the server.