[image] Uploading/Displaying Images in MVC 4

Anyone know of any step by step tutorials on how to upload/display images from a database using Entity Framework? I've checked out code snippets, but I'm still not clear on how it works. I have no code, because aside from writing an upload form, I'm lost. Any (and I mean any) help is greatly appreciated.

On a sidenote, why don't any books cover this topic? I have both Pro ASP.NET MVC 4 and Professional MVC4, and they make no mention of it.

Here is a short tutorial:

Model:

namespace ImageUploadApp.Models
{
    using System;
    using System.Collections.Generic;

    public partial class Image
    {
        public int ID { get; set; }
        public string ImagePath { get; set; }
    }
}

View:

1. Create:

   @model ImageUploadApp.Models.Image
   @{
       ViewBag.Title = "Create";
   }
   <h2>Create</h2>
   @using (Html.BeginForm("Create", "Image", null, FormMethod.Post, 
                                 new { enctype = "multipart/form-data" })) {
       @Html.AntiForgeryToken()
       @Html.ValidationSummary(true)
       <fieldset>
           <legend>Image</legend>
           <div class="editor-label">
               @Html.LabelFor(model => model.ImagePath)
           </div>
           <div class="editor-field">
               <input id="ImagePath" title="Upload a product image" 
                                     type="file" name="file" />
           </div>
           <p><input type="submit" value="Create" /></p>
       </fieldset>
   }
   <div>
       @Html.ActionLink("Back to List", "Index")
   </div>
   @section Scripts {
       @Scripts.Render("~/bundles/jqueryval")
   }
   

2. Index (for display):

   @model IEnumerable<ImageUploadApp.Models.Image>
   
   @{
       ViewBag.Title = "Index";
   }
   
   <h2>Index</h2>
   
   <p>
       @Html.ActionLink("Create New", "Create")
   </p>
   <table>
       <tr>
           <th>
               @Html.DisplayNameFor(model => model.ImagePath)
           </th>
       </tr>
   
   @foreach (var item in Model) {
       <tr>
           <td>
               @Html.DisplayFor(modelItem => item.ImagePath)
           </td>
           <td>
               @Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
               @Html.ActionLink("Details", "Details", new { id=item.ID }) |
               @Ajax.ActionLink("Delete", "Delete", new {id = item.ID} })
           </td>
       </tr>
   }
   
   </table>
   

3. Controller (Create)

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

Hope this will help :)

        <input type="file" id="picfile" name="picf" />
       <input type="text" id="txtName" style="width: 144px;" />
 $("#btncatsave").click(function () {
var Name = $("#txtName").val();
var formData = new FormData();
var totalFiles = document.getElementById("picfile").files.length;

                    var file = document.getElementById("picfile").files[0];
                    formData.append("FileUpload", file);
                    formData.append("Name", Name);

$.ajax({
                    type: "POST",
                    url: '/Category_Subcategory/Save_Category',
                    data: formData,
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    success: function (msg) {

                                 alert(msg);

                    },
                    error: function (error) {
                        alert("errror");
                    }
                });

});

 [HttpPost]
    public ActionResult Save_Category()
    {
      string Name=Request.Form[1]; 
      if (Request.Files.Count > 0)
        {
            HttpPostedFileBase file = Request.Files[0];
         }


    }