asp.net mvc - Upload Image in form and show it on MVC 4

Question

What is the Best way to store an image uploaded by the user and then show it in my website?

1. Store it as binary in DB. then how should I show it with `img`?
   I think I should write it to a directory somehow then pass it's address as `src` attribute of `img`.
2. I can store it somewhere in web server, store the address of image in database. then I should simply specify the address in database in `src` attribute.
3. Other ways?!

in my opinion the second way is more convenient.
and another question!
In both case How Can I upload this images in html form? the @Html doesent hav anything like @Html.FileFor(...) and how can I get data of <input type='file'/> in my Action?
I appreciate any suggestion.

Answer 1

in my opinion the second way is more convenient.

Yeah in my opinion as well.

In both case How Can I upload this images in html form?

Pretty easy. As always in an ASP.NET MVC application you start by designing a view model:

public class MyViewModel
{
    [Required]
    public HttpPostedFileBase File { get; set; }
}

then you could have a controller with 2 actions (one rendering the view and another handling the file upload):

public class HomeController: Controller
{
    public ActionResult Index()
    {
        return View(new MyViewModel());
    }

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        if (!ModelState.IsValid)
        {
            // the user didn't upload any file =>
            // render the same view again in order to display the error message
            return View(model);
        }

        // at this stage the model is valid => 
        // you could handle the file upload here

        // let's generate a filename to store the file on the server
        var fileName = Guid.NewGuid().ToString() + Path.GetFileName(file.FileName);
        var path = Path.Combine(Server.MapPath("~/App_Data"), fileName);
        // store the uploaded file on the file system
        file.SaveAs(path);

        // TODO: now you could store the path in your database

        // and finally return some ActionResult
        // to inform the user that the upload process was successful
        return Content("Thanks for uploading. Your file has been successfully stored on our server");
    }
}

and finally you will have a corresponding strongly typed view that will contgain the form to upload the file:

@model MyViewModel
@using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <div>
        @Html.LabelFor(x => x.File)
        @Html.TextBoxFor(x => x.File, new { type = "file" })
        @Html.ValidationMessageFor(x => x.File)
    </div>
    <button type="sybmit">Upload</button>
}

Also I would recommend you reading Phil Haack's blog post that illustrates file uploading in ASP.NET MVC works.