Cannot upload images in ASP .NET MVC4

Question

I cannot upload image in my MVC application. Does anyone know how I can fix this error?

Model Image:

namespace HelloWorld.Models
{
    public class Image
    {
        [Required]
        [DataType(DataType.MultilineText)]
        public string ImagePath { get; set; }

        public int ImageId { get; set; }
    }
}

Index view:

@model IEnumerable<HelloWorld.Models.Image>

@{
    ViewBag.Title = "Index";
}

<p>
    @Html.ActionLink("Create New", "Create")
</p>

@foreach (var item in Model) {
     <img src="@Html.DisplayFor(modelItem => item.ImagePath)">
}

Create view:

@model HelloWorld.Models.Image
@{
    ViewBag.Title = "Create";
}

 <form method="post" action="@Url.Action("Create", "Images")">
    <div>
        <h4>Image</h4>
        <hr />

        <input type="file" name="file">
        <input type="submit" value="Upload">
    </div>
</form>

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

Create action:

[HttpPost]
        public ActionResult Create(Image img, HttpPostedFileBase file)
        {
            if (ModelState.IsValid)
            {
                if (file != null)
                {
                    file.SaveAs(HttpContext.Server.MapPath("../../Content/img/upload/") + file.FileName);
                    img.ImagePath = file.FileName;
                }
                db.Images.Add(img);
                db.SaveChanges();
                return RedirectToAction("Index");
            }
            return RedirectToAction("Create","Images");
        }

I think my problem is that I have model state not valid. Because I have RedirectToAction("Create","Images");

Set a breakpoint on your `if` and check the `ModelState` errors. — Andrei V, Jun 22 '15 at 08:49
Add `enctype="multipart/form-data" ` attribute to your form. — Zabavsky, Jun 22 '15 at 08:52
@Geronimo by the way have you had a look at other, perhaps better upload options such as https://blueimp.github.io/jQuery-File-Upload/index.html ? — Paul Zahra, Jun 22 '15 at 09:12

heymega · Answer 1 · 2015-06-22T09:09:48.110

1

When you post files you need to include the multipart/form-data enctype on your form.

<form method="post" action="@Url.Action("Create", "Images")" enctype="multipart/form-data">
    <div>
        <h4>Image</h4>
        <hr />

        <input type="file" name="file">
        <input type="submit" value="Upload">
    </div>
</form>

Update

Create a view model for your file

public class FileViewModel
{
    [Required]
    public HttpPostedFileBase file { get; set; }
}

Then update your action as follows

    [HttpPost]
    public ActionResult Create(FileViewModel model)
    {
        if (ModelState.IsValid)
        {

            var image = new Image();

            model.SaveAs(HttpContext.Server.MapPath("../../Content/img/upload/") + model.FileName);
            image.ImagePath = model.FileName;

            db.Images.Add(image);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        return RedirectToAction("Create", "Images");
    }

edited Jun 22 '15 at 09:09

answered Jun 22 '15 at 08:53

heymega

9,215
8
42
61

Sorry, but it's not working. – Geronimo Jun 22 '15 at 08:59
I just read your comments - Your ModelState is invalid because you arent passing any model data over. You ImagePath is required yet you aren't providing one. It looks like you dont even need the Image object as a parameter. Just initialise it in your action – heymega Jun 22 '15 at 09:03
@Geronimo I've updated my answer. I've removed the Image class from the action's parameter and intialised it inside the action. Furthermore, I have created a separate viewmodel for your file. – heymega Jun 22 '15 at 09:11

Cannot upload images in ASP .NET MVC4

1 Answers1