Cargar y guardar una imagen en la base de datos

Para este ejemplo utilizaremos la base de datos Nortwind con la tabla categories.



1.) Debemos crear el campo  MimeType para almacenar el tipo de datos del archivo.


ALTER TABLE dbo.Categories ADD
ImageMimeType varchar(50) NULL




6.) Abra el controlador : CategoriasController

6.1)Agregue el siguiente método

 public FileContentResult GetImage(Int32 CategoryID) 
        { 
            Category cat = db.Categories.FirstOrDefault(c => c.CategoryID == CategoryID); 
            if (cat != null)
            { 
                 
                string type = string.Empty;
                if (!string.IsNullOrEmpty(cat.ImageMimeType)) 
                { 
                    type = cat.ImageMimeType; 
                } 
                else 
                { 
                    type = "image/jpeg"; 
                } 

                return File(cat.Picture, type); 
            } 
            else 
            { 
                return null;
            } 
        }

6.2) Edite el metodo Create de la siguiente manera.

  [HttpPost] 
        public ActionResult Create(Category category, HttpPostedFileBase image)
        { 
            if (ModelState.IsValid) 
            { 
                if (image != null)
                {                 
                    category.ImageMimeType = image.ContentType; 
                    int length = image.ContentLength; 
                    byte[] buffer = new byte[length]; 
                    image.InputStream.Read(buffer, 0, length);
                    category.Picture = buffer; 
                } 

                db.Categories.AddObject(category); 
                db.SaveChanges(); 
                return RedirectToAction("Index");   
            } 

            return View(category); 
        }

7.) Editando vistas
7.1) Abra la vista index.cshtml ubicada en la carpeta view, agregue el siguiente código, después del td del campo descripción.

<td> 
@if (item.Picture != null)
{ 
<div style="float:left;margin-right:20px"> 
<img width="75" height="75" src="@Url.Action("GetImage", "Categorias", new { item.CategoryID })" /> 
</div> 
} 
</td>

7.2)Abra la vista Create.cshtml ubicada en la carpeta view, reemplace con el siguiente código:

 @model MVCentity.Models.Category 

@{ 
    ViewBag.Title = "Create"; 
} 

<h2>Create</h2> 

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> 

@using (Html.BeginForm("Create", "Categorias", FormMethod.Post, new { enctype = "multipart/form-data" })) 
{ 
    @Html.ValidationSummary(true) 
    <fieldset> 
        <legend>Category</legend> 

        <div class="editor-label"> 
            @Html.LabelFor(model => model.CategoryName) 
        </div> 
        <div class="editor-field"> 
            @Html.EditorFor(model => model.CategoryName) 
            @Html.ValidationMessageFor(model => model.CategoryName) 
        </div> 

        <div class="editor-label"> 
            @Html.LabelFor(model => model.Description) 
        </div> 
        <div class="editor-field"> 
            @Html.EditorFor(model => model.Description) 
            @Html.ValidationMessageFor(model => model.Description) 
        </div> 
        <div class="editor-label"> 
            Imagen 
        </div> 
        <div class="editor-field"> 
            <input type="file" name="image" /> 
        </div> 
        <p> 
            <input type="submit" value="Create" /> 
        </p> 
    </fieldset> 
} 

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