Sending Multi part form and JSON data from Angular JS to MVC

In this way you can upload multiple files along with some properties.

To send multiple files/records using formdata you need to use indexing on the key e.g. [0].someKey i.e. formdata.append('[' + i + '].' + key, value); but if you want to send only one record then you can remove the indexing and pass the key directly into the append function.

When the user clicks on "Add File" button, then a new row is added to the table, user can select a file by clicking the file control and the directive sets the File object onto the controller's scope. When the "Save" button is clicked I am looping through all the files and its properties and appending them to the FormData object and posting it to the controller using a configuration object along with the FormData object.

The model.

public class FileModel
{
    public int Id { get; set; }

    public string Name { get; set; }

    public HttpPostedFileBase Attachment { get; set; } // The HttpPostedFileBase provides access to files uploaded by the client.
}

The Action method on MVC Controller

[HttpPost]
public JsonResult SaveFiles(List<FileModel> files)
{
    // Your logic here.
}

The View.

<form role="form" ng-submit="saveFiles()">
    <div class="form-group">
        <table class="table table-bordered table-striped table-responsive">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>File</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-hide="files.length">
                    <td colspan="2">No records to display.</td>
                </tr>

                <tr ng-repeat="file in files">
                    <td>
                        <input type="text" class="form-control" ng-model="file.Name" />
                    </td>
                    <td>
                        <input type="file" class="form-control" file-model="file.Attachment" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="col-xs-12">
        <div class="col-xs-6">
            <button type="button" class="btn btn-info btn-sm" ng-click="addFile()">Add File</button>
        </div>
        <div class="col-xs-6">
            <button type="submit" class="btn btn-info btn-sm">Save</button>
            <button type="button" class="btn btn-info btn-sm" ng-click="cancelSaveFiles()">Cancel</button>
        </div>
    </div>
</form>

The AngularJS controller.

var app = angular.module('example', []);

app.controller('FilesController', function ($scope) {
    $scope.files = [];
    $scope.saveFiles = saveFiles; // saveFiles func given below.
});

The AngularJS directive for <input type="file" />.

app.directive('fileModel', function ($parse) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                var model = $parse(attrs.fileModel);
                var modelSetter = model.assign;

                element.bind('change', function () {
                    scope.$apply(function () {
                        modelSetter(scope, element[0].files[0]); // sets the file object on the model property.
                    });
                });

                scope.$watch(model, function (newValue, oldValue) {
                if (newValue === null || newValue === undefined || newValue === '') {
                    angular.element(element).val(''); // clears the file from the input element if the model is cleared.
                }
            });
        }
    };
});        

The AJAX call.

function saveFiles() {
            if (angular.isArray($scope.files) && $scope.files.length > 0) {
                var formdata = new FormData();

                for (var i = 0; i < $scope.files.length; i++) {
                    for (var key in $scope.files[i]) {
                        var value = $scope.files[i][key];    
                        formdata.append('[' + i + '].' + key, value);
                    }
                }

                var config = {
                    transformRequest: angular.identity,
                    headers: { 'Content-Type': undefined }                        
                };

                $http.post('/Area/Controller/SaveFiles', formdata, config)
                    .success(saveFilesCompleted);

                function saveFilesCompleted(data) {
                    // call back
                }
            }
        }