MVC 4 ajax form image upload fails

Question

I am trying to add an image by using MVC 4 ajax form, but it always returns null value. I added my model, controller and view.

My View

    @using (Ajax.BeginForm("Create", "Images", new AjaxOptions { HttpMethod = "Post", OnSuccess = "OnSuccess", OnFailure = "OnFailure", UpdateTargetId = "messageDiv" }, new { enctype = "multipart/form-data" }))
    {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true)
        <div class="editor-field">
                    @Html.LabelFor(model => model.Image.Description, new { @class = "control-label" })
                    <div class="controls">
                        @Html.TextBoxFor(model => model.Image.Description)
                    </div>
                    @Html.TextBoxFor(model => model.FileImage, new { type = "file" })
                   @Html.ValidationMessageFor(model => model.FileImage)
                </div>...
    }

My Model

public class ImageViewModel
    {

        public IList<Image> Images { get; set; }
        public Image Image { get; set; }
        public HttpPostedFileBase FileImage { get; set; }

    }

My Controller

[HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create(ImageViewModel model, HttpPostedFileBase FileImage)
        {
            if (ModelState.IsValid)
            {
                var x = FileImage.FileName;
                var imageUrl = Path.GetFileName(model.FileImage.FileName);
                ...
            }
        }

In this example, I could not get the FileName. it returns always null value. Could you help me to solve this problem. I will be very happy.

You can't upload files using Ajax.BeginForm. See http://stackoverflow.com/questions/8499748/mvc3-file-upload-using-ajax-form-request-files-empty — Dave, Jan 20 '14 at 20:51

pedrommuller · Accepted Answer · 2014-01-20T21:25:03.367

0

I would prefer read the image using the request intead of trying to bind that to a model,

public ActionResult Create(ImageViewModel model)
{
    if (Request.Files != null)
    {
        HttpPostedFileBase file = Request.Files[0]; //assuming that's going to be the first file 
        if (file.ContentLength > 0)
        {
           string fileName = Path.GetFileName(file.FileName);
           string directory = Server.MapPath("/"); //change ths to your actual upload folder
           file.SaveAs(Path.Combine(directory, fileName));
        }
    }

}

edited Jan 20 '14 at 21:25

answered Jan 20 '14 at 19:49

pedrommuller

15,741
10
76
126

You can remove the FileImage parameter in the method. – DJ. Jan 20 '14 at 19:59
@Djavier89 updated! thanks for the observation, just copied and pasted it from the koirene code and I forgot to update the signature! – pedrommuller Jan 20 '14 at 21:27
I turned my Ajax.BeginForm to an Html.BeginForm, after the change code worked well. Thank you very much. – koirene Jan 21 '14 at 10:05

MVC 4 ajax form image upload fails

1 Answers1