HttpPostedfileBase is null using jQuery Ajax

Question

I have problem with uploading file In Asp.net Mvc. First of all I should use Ajax to pass the upload file value.

In javascript I have model that I fill it, When I c

Answer 1

I have modified @a moradi's answer.

JS:

//FormData:
//Consider it a normal form but with "multipart/form-data" encoding type.
//Inside it works same as XMLHttpRequest.send() method.    
var model = new FormData();
model.append("File", $('#file')[0].files[0]);
model.append("Name", "Name");
$.ajax({ 
        url: someUrl,
        type: "POST",
        data: model,
        //contentType: 
        //Sets the ContentType in header.
        //The default contentType is "application/x-www-form-urlencoded; charset=UTF-8". But this will prevent us sending AntiForgeryToken to service/controller.
        //To prevent this contentType is set to false.
        contentType: false,
        //processData:
        //To prevent data getting converted to string format, 'processData' option is set to false.
        processData: false,
        success = function (m) {...}
        error = function (m) {...}
    });

View Model:

public class PhotoAlbumViewModel {
    public  string Name { get; set; }
    public HttpPostedFileBase File { get; set; }
}

Controller:

public JsonResult AddPhoto(PhotoAlbumViewModel model) {
    ...
}

Refrence:

Reffer following links for details: FormData , JQuery , ContentType