Uploading/Displaying Images in MVC 4

Question

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.

Answer 1

Have a look at the following

@using (Html.BeginForm("FileUpload", "Home", FormMethod.Post,                              new { enctype = "multipart/form-data" })) {       <label for="file">Upload Image:</label>      <input type="file" name="file" id="file" style="width: 100%;" />      <input type="submit" value="Upload" class="submit" />  } 

your controller should have action method which would accept HttpPostedFileBase;

 public ActionResult FileUpload(HttpPostedFileBase file)     {         if (file != null)         {             string pic = System.IO.Path.GetFileName(file.FileName);             string path = System.IO.Path.Combine(                                    Server.MapPath("~/images/profile"), pic);              // file is uploaded             file.SaveAs(path);              // save the image path path to the database or you can send image              // directly to database             // in-case if you want to store byte[] ie. for DB             using (MemoryStream ms = new MemoryStream())              {                  file.InputStream.CopyTo(ms);                  byte[] array = ms.GetBuffer();             }          }         // after successfully uploading redirect the user         return RedirectToAction("actionname", "controller name");     } 

Update 1

In case you want to upload files using jQuery with asynchornously, then try this article.

the code to handle the server side (for multiple upload) is;

 try     {         HttpFileCollection hfc = HttpContext.Current.Request.Files;         string path = "/content/files/contact/";          for (int i = 0; i < hfc.Count; i++)         {             HttpPostedFile hpf = hfc[i];             if (hpf.ContentLength > 0)             {                 string fileName = "";                 if (Request.Browser.Browser == "IE")                 {                     fileName = Path.GetFileName(hpf.FileName);                 }                 else                 {                     fileName = hpf.FileName;                 }                 string fullPathWithFileName = path + fileName;                 hpf.SaveAs(Server.MapPath(fullPathWithFileName));             }         }      }     catch (Exception ex)     {         throw ex;     } 

this control also return image name (in a javascript call back) which then you can use it to display image in the DOM.

UPDATE 2

Alternatively, you can try Async File Uploads in MVC 4.