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
– TanvirArjel, Commented Jan 28, 2019 at 5:44
@TanvirArjel The jQuery method 'SaveStundent' will be called on 'Submit' button onclick event. — Gopi
– Gopi, Commented Jan 28, 2019 at 5:45
@Gopi Add your full Student model and input field you are using for the file upload in the form. please! — TanvirArjel
– TanvirArjel, Commented Jan 28, 2019 at 5:46

Gopi · Accepted Answer · 2019-01-29 04:36:32Z

9

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;
}

edited Jan 29, 2019 at 4:36

Gopi

5,91723 gold badges91 silver badges152 bronze badges

answered Jan 28, 2019 at 5:51

Hamzeh.Ebrahimi

3051 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Gopi Over a year ago

It did work for the form data but did not receive any file in studImg but Request.Files.Count was 1

Hamzeh.Ebrahimi Over a year ago

insert cache: false to ajax parameters

Gopi Over a year ago

It did not help

Ted Nyberg Over a year ago

The answer does not have a Student parameter in the CreateStudent action method, which I think is important in the OP.

Newclique Over a year ago

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

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related