HttpPostedFileBase null when I try to upload image in asp .net mvc5 with js knockout?

Question

I'm trying to upload images in asp .net mvc 5 with knockout js and the paraFrame PhotoFile that is of type HttpPostedFileBase comes to me null, and I can not upload the image, I'm new working with Knockout js I would like someone to help me with that,

This is the model,

    public int LenderId { get; set; }
    public string GenderId { get; set; }
    public string GenderName { get; set; }
    public string Email { get; set; }
    public bool IsActive { get; set; }
    public string PhotoPath { get; set; }
    public HttpPostedFileBase PhotoFile { get; set; }

This is the html,

        <div class="form-group">
            <span class="control-label col-md-2"><strong>Foto:</strong></span>
            <div class="col-md-10">
                <span class="btn btn-default btn-file">
                    <input type="file" class="form-control" id="PhotoUpload" name="PhotoUpload" data-bind="attr:{src: PhotoPath}" />
                </span>
            </div>
        </div>

this is the js

function lenderModel() { var lenderModel = this;

lenderModel.LenderId = ko.observable();
lenderModel.FirstName = ko.observable();
lenderModel.MiddleName = ko.observable();
lenderModel.FirstLastName = ko.observable();
lenderModel.SecondLastName = ko.observable();
lenderModel.IdentificationCard = ko.observable();
lenderModel.GenderId = ko.observable();
lenderModel.GenderName = ko.observable();
lenderModel.Email = ko.observable();
lenderModel.IsActive = ko.observable();
lenderModel.PhotoPath = ko.observable();
lenderModel.CreateBy = ko.observable();
lenderModel.CreationDate = ko.observable();
lenderModel.ModifiedBy = ko.observable();
lenderModel.ModifiedDate = ko.observable();

}

lenderViewModel.Create = function () {
    if (lenderViewModel.IsNew()) {
        $.ajax({
            url: '/AdminLenders/Create',
            data: ko.toJSON(lenderViewModel.LenderModel()),
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            async: true,
            success: function (data) {
                if (data.Success) {
                    LoadGenders();
                    LoadListLenders();
                    $('#TextboxFirstName').val('');
                    $('#TextboxMiddleName').val('');
                    $('#TextboxFirstLastName').val('');
                    $('#TextboxSecondLastName').val('');
                    $('#TextboxIdentificationCard').val('');
                    $('#TextboxEmail').val('');
                    $('#ComboBoxGenders').val('');
                    $('#TextboxIsActive').prop('checked', false);
                    swal("Prestamista creado!", "Se ha registrado correctamente!", "success")
                }
                else {
                    swal("Error creando el prestamista!", data.Data, "error")
                }
            },
            error: function (ex) {
                alert('Ocurrión un error');
            }
        });
    }
};

As I am new to this of knockout js I do not know how I can implement it, help appreciate the contribution and help

Answer 1

I took a guess at what the Create method on the controller looked like and came up with this using the FormData object.

lenderViewModel.Create = function () {
    if (lenderViewModel.IsNew()) {
            var lender = lenderViewModel.LenderModel();    

        var lenderData = new FormData();

        // Build up a matching Lender
        lenderData.append("LenderId", lender.LenderId());
        lenderData.append("GenderId", lender.GenderId());
        lenderData.append("GenderName", lender.GenderName());
        lenderData.append("Email", lender.Email());
        lenderData.append("IsActive", lender.IsActive());
        lenderData.append("PhotoPath", lender.PhotoPath());

            // Get the file and add it to the Lender
        var fileUpload = $("#PhotoUpload").get(0);
        var files = fileUpload.files;
        if(files.length === 1) {
             lenderData.append("PhotoFile", files[0]);
                }

        $.ajax({
            url: '/AdminLenders/Create',
            data: lenderData,
            enctype: "multipart/form-data",
            dataType: "json",
            type: "POST",
            contentType: false,
            processData: false,
            success: function (data) {
                if (data.Success) {
                    LoadGenders();
                    LoadListLenders();
                    $('#TextboxFirstName').val('');
                    $('#TextboxMiddleName').val('');
                    $('#TextboxFirstLastName').val('');
                    $('#TextboxSecondLastName').val('');
                    $('#TextboxIdentificationCard').val('');
                    $('#TextboxEmail').val('');
                    $('#ComboBoxGenders').val('');
                    $('#TextboxIsActive').prop('checked', false);
                    swal("Prestamista creado!", "Se ha registrado correctamente!", "success")
                }
                else {
                    swal("Error creando el prestamista!", data.Data, "error")
                }
            },
            error: function (ex) {
                alert('Ocurrión un error');
            }
        });
    }
};