How to Post file along with form data to MVC controller using Ajax?

Question

I am trying to post file along with other form data to MVC controller using jquery Ajax.

jQuery Ajax call

function SaveStundent () {
    var formData = new FormData();

    var file = document.getElementById("studImg").files[0];
    formData.append("studImg", file);

    var studentDetails = {
    Name: $('#txtName').val().trim()
    };

    formData.append("studentDetails", studentDetails);

        $.ajax({
        type: "POST",
        url: "@(Url.Action("CreateStudent", "Student"))",          
        data: formData,
        processData: false,
        contentType: false,
            success: function (response) {
            }
        });
}

MVC Controller

[HttpPost]
public ActionResult CreateStudent(Student studentDetails)
{
// ...
}

Student Model

public class Student
{
    public string Name { get; set; }
}

Though I was able to get the file in the Request, the studentDetails parameter is always null in MVC controller.

How are you invoking the form submission? using submit button of the form or any other button outside the form? — TanvirArjel, Jan 28 '19 at 05:44
@TanvirArjel The jQuery method 'SaveStundent' will be called on 'Submit' button onclick event. — Gopi, Jan 28 '19 at 05:45
@Gopi Add your full `Student` model and input field you are using for the file upload in the form. please! — TanvirArjel, Jan 28 '19 at 05:46
Sounds like your viewmodel passed as null because it doesn't match with the definition. Check these posts since you're passing with FormData object: https://stackoverflow.com/questions/20629105/ajax-fileupload-jquery-formdata-in-asp-net-mvc & https://stackoverflow.com/Questions/581703/how-to-do-a-asp-net-mvc-ajax-form-post-with-multipart-form-data. — Tetsuya Yamamoto, Jan 28 '19 at 05:46
@Gopi: try to change your post data like : data: {studentDetails=studentDetails} — BeiBei ZHU, Jan 28 '19 at 05:50

score 9 · Accepted Answer · edited Jan 29 '19 at 04:36

try this

function SaveStundent () {
    var formData = new FormData();

    var file = document.getElementById("studImg").files[0];
    formData.append("studImg", file);

    var Name= $('#txtName').val().trim()

    formData.append("Name", Name);

        $.ajax({
        type: "POST",
        url: "@(Url.Action("CreateStudent", "Student"))",          
        data: formData,
        processData: false,
        contentType: false,
            success: function (response) {
            }
        });
}

then change your action to get image as follow

[HttpPost]
public ActionResult CreateStudent(Student studentDetails,HttpPostedFileBase studImg)
{
// ...
}

Working Code

<form id="frm" enctype="multipart/form-data">
    <input type="file" name="studImg" id="studImg" />
    <input type="text" name="txtName" id="txtName" />
    <input type="button" value="Save" onclick="SaveStundent()" />
</form>

<script>
    function SaveStundent () {
        var formData = new FormData();
        var file = document.getElementById("studImg").files[0];
        formData.append("studImg", file);

        var Name = $('#txtName').val().trim()
        formData.append("Name", Name);

        $.ajax({
        type: "POST",
        url: "@(Url.Action("CreateStudent", "Student"))",          
        data: formData,
        processData: false,
        contentType: false,
        success: function (response) {
            }
        });
    }
</script>

public ActionResult CreateStudent(string Name, HttpPostedFileBase studImg)
{
    return null;
}

It did work for the form data but did not receive any file in studImg but Request.Files.Count was 1 — Gopi, Jan 28 '19 at 06:00
The answer does not have a `Student` parameter in the `CreateStudent` action method, which I think is important in the OP. — Ted Nyberg, Oct 11 '19 at 10:27
You don't need a separate parameter for the upload. Changes: 1. Student class - public HttpPostedFileBase studImg {get; set;} ... 2. CreateStudent method: public ActionResult CreateStudent(Student student) {...} 3. $.ajax({ url: '/home/CreateStudent', ...} Everything else in the answer is correct. I tested this with MVC 5 — Newclique, Apr 26 '20 at 00:22

How to Post file along with form data to MVC controller using Ajax?

1 Answers1

Linked