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.
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.
Alternatively, you can try Async File Uploads in MVC 4.
file.SaveAs(path) how can I then delete the file from that path?
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:
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") } 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> 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 :)
filename.LastIndexOf(".") something like that. Hope this helps
<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]; } } 
Pro ASP MVC 4theSportsStore Tutorialdoes cover this starting onpage 292