How to extend angular-xeditable editable row with file upload field

Question

I am trying to extend (my real example is very similar) angular-xeditable - Editable row - example described here: http://vitalets.github.io/angular-xeditable/#editable-row or its jsFiddle link here: http://jsfiddle.net/NfPcH/93/

so that I have one additional column for uploading file for every row/item. It is fine if it can be just input element of type file, but I am opened for other solutions. Usually, my column looks like this:

                <td>
                    <span editable-text="template.description" e-name="description" e-form="rowform" e-required>
                        {{ template.description || 'empty' }}
                    </span>
                </td>

But, now I want to add my custom column, and I tried input element with or without all metioned attributes here:

                <td>

                    <input id="file"
                           accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                           ng-show="rowform.$visible"
                           class="btn btn-default"
                           name="file"
                           type="file"
                           e-name="file"
                           e-form="rowform"
                           value="{{ user.file || 'empty' }}" />
                </td>

In any case, I cannot get - file - value in my angular controller after trying to save row, when this code is executed:

    $scope.saveUser = function (data, id) {
        //$scope.user not updated yet
        angular.extend(data, { id: id });
        angular.extend(data, { file: file });
        return $http.post('/saveUser', data);
    };

My - data - object is here with all other properties like - description - but not with - file - property!

Of course, I extended form onbeforesave event with:

... form editable-form name="rowform" onbeforesave="saveTemplate($data, user.id, user.file)" ...

Any suggestion?

Thanks, Vedran

Answer 1

I'm stuck with this.

When I thought that everything is fine because I got file object in my angular model by using solution with creation of custom directive mentioned here:

ng-model for <input type="file"/>

... then new issue started to bother me.

I can't get this file object mapped during binding process to HttpPostedFileBase parameter of MVC controller.

I tried everything, like excluding property and adding separate parameter to my MVC controller, or creating custom MVC model binder but examples I saw used ModelBinderResult class which I couldn't find under MVC 5 classes in any namespace.

This File object is here for sure, but I couldn't make it work. I know that object is not empty or null because if I specify type of controller's input parameter => object, then it is not null.

Please, any help will be more than welcome!

Vedran