MVC upload and save form image with Ajax

Question

I have a form with 3 inputs (text, image, submit button).

@using (Html.BeginForm("Save", "User", FormMethod.Post, new {Id="Form1", enctype = "multipart/form-data"}))
        {
        <input id="FileUploadInput" name="Image" type="file"/>
        <input id="FirstName"  Name="FirstName">
        <input type="submit" id="inputSubmit" value="Save" />
        }

Now i want to submit this form from javascript with AJAX

$("#inputSubmit").click(function (e) {
            e.preventDefault();
            var form = $("#Form1");
            form.validate();
            if (form.valid()) {
                $.ajax({
                    url: "/User/Save",
                    data: form.serialize(),
                    type: "POST",
                    success: function (data) {
                        if (data === "") {
                            location.reload();
                        }
                        else {
                            $(".content").html(data);
                            $.validator.unobtrusive.parse($(".content"));
                        }
                    }
                });
            }

            return false;
        });

In my controller file i have.

public ActionResult Save(UserProfileSettings settings)
{
  var image = setings.Image
  var name = settings.Firstname
}

My model

public class UserProfileSettings
{
   public string FirstName { get; set; }
   public HttpPostedFileBase Image { get; set; }
}

The problem is that in my controller method i am getting settins.FirstName, but settings.Image is always null. I think, that with this method it is not possible to serialize image file.

You can probably benefit from following an example shown here: http://powerdotnetcore.com/asp-net-mvc/asp-net-mvc-simple-ajax-file-upload-using-jquery — Milan Stojanovic, Apr 10 '14 at 12:34

score 0 · Answer 1 · answered Apr 10 '14 at 12:34

0

try use jquery plugin muliple upload: http://blueimp.github.io/jQuery-File-Upload/

answered Apr 10 '14 at 12:34

Daniel Melo

548
5
12

score 0 · Answer 2 · edited May 23 '17 at 12:21

0

As Darin Dimitrov suggested before, it's better to use jquery forms plugin. I have already posted this in my another answer here.

Quick Example

View

@using (Ajax.BeginForm("YourAction", "YourController", new AjaxOptions() { HttpMethod = "POST" }, new { enctype = "multipart/form-data"}))
{
    @Html.AntiForgeryToken()
    <input type="file" name="files"><br>
    <input type="submit" value="Upload File to Server">
}

Controller

[HttpPost]
[ValidateAntiForgeryToken]
public void YourAction(IEnumerable<HttpPostedFileBase> files)
{
    if (files != null)
    {
        foreach (var file in files)
        {
            // Verify that the user selected a file
            if (file != null && file.ContentLength > 0)
            {
                // extract only the fielname
                var fileName = Path.GetFileName(file.FileName);
                // TODO: need to define destination
                var path = Path.Combine(Server.MapPath("~/Upload"), fileName);
                file.SaveAs(path);
            }
        }
    }
}

edited May 23 '17 at 12:21

Community

1
1

answered Apr 10 '14 at 13:03

Ashwini Verma

7,477
6
36
56

But i want to submit the form from javascript method $("#inputSubmit").click(function (e) { – Armen Mkrtchyan Apr 10 '14 at 13:17
1

@ArmenMkrtchyan: Ajax.BeginForm() is kind of jquery ajax form submit which makes so easy to do this. http://stackoverflow.com/questions/5410055/using-ajax-beginform-with-asp-net-mvc-3-razor – Ashwini Verma Apr 10 '14 at 13:50
Down voter should see Darin Dimitrov suggestion too. http://stackoverflow.com/questions/2780241/asp-net-mvc-file-upload-ajax-post?lq=1 – Ashwini Verma Apr 10 '14 at 14:02
Even see this example too http://stackoverflow.com/questions/581703/how-to-do-a-asp-net-mvc-ajax-form-post-with-multipart-form-data/13522052 – Ashwini Verma Apr 10 '14 at 14:11

MVC upload and save form image with Ajax

2 Answers2