Image Uploads
I am going to complete the SportsStore user experience with something a little more sophisticated: I will add the ability for the
administrator to upload product images and store them in the database so that they are displayed in the product catalog. This isn't
something that is especially interesting or useful in its own right, but it does allow me to demonstrate some important MVC
Framework features.
Extending the Database
Open the Visual Studio Server Explorer window and navigate to the Products table in the database created in
Chapter 7. The name of the data connection may have changed to be EFDbContext, which is the name assigned to the
connection in the Web.config file. Visual Studio is a little bit inconsistent about when it renames the connection, so you
might also see the original name that was shown when the connection was created. Right-click on the Products table and
select New Query from the pop-up menu and enter the following SQL into the text area:
ALTER TABLE [dbo].[Products]
ADD [ImageData] VARBINARY (MAX) NULL,
[ImageMimeType] VARCHAR (50) NULL;
Click the Execute button (which is marked with an arrow) in the top-left cover of the window and Visual Studio will update
the database, adding two new columns to the table. To test the update, right-click on the Products table in the Server
Explorer window and select Open Table Definition from the menu. You will see that there are now columns
called ImageData and ImageMimeType, as shown in Figure 12-3.
Tip If the columns are not visible, close the design window, right-click on the data connection in the Server
Explorer window and select Refresh from the menu. The new columns should now be visible when you select the
Open Table Definition menu item again.
Enhancing the Domain Model
I need to add two new fields to the Products class in the SportsStore.Domain project that correspond to the new
database columns, as shown in Listing 12-10.
Listing 12-10. Adding Properties in the Product.cs File
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;
namespace SportsStore.Domain.Entities {
public class Product {
[HiddenInput(DisplayValue = false)]
public int ProductID { get; set; }
[Required(ErrorMessage = "Please enter a product name")]
public string Name { get; set; }
[DataType(DataType.MultilineText)]
[Required(ErrorMessage = "Please enter a description")]
public string Description { get; set; }
[Required]
[Range(0.01, double.MaxValue, ErrorMessage = "Please enter a
positive price")]
public decimal Price { get; set; }
[Required(ErrorMessage = "Please specify a category")]
public string Category { get; set; }
public byte[] ImageData { get; set; }
public string ImageMimeType { get; set; }
}
}
Caution Make sure that the names of the properties that you add to the Product class exactly match the names you gave
to the new columns in the database.
Creating the Upload User Interface Elements
The next step is to add support for handling file uploads. This involves creating a UI that the administrator can use to upload an
image. Modify the Views/Admin/Edit.cshtml view so that it matches Listing 12-11.
Listing 12-11. Adding Support for Images in the Edit.cshtml File
@model SportsStore.Domain.Entities.Product
@{
312
ViewBag.Title = "Admin: Edit " + @Model.Name;
Layout = "∼/Views/Shared/_AdminLayout.cshtml";
}
<div class="panel">
<div class="panel-heading">
<h3>Edit @Model.Name</h3>
</div>
@using (Html.BeginForm("Edit", "Admin",
FormMethod.Post, new { enctype = "multipart/form-data" })) {
<div class="panel-body">
@Html.HiddenFor(m => m.ProductID)
@foreach (var property in ViewData.ModelMetadata.Properties) {
switch (property.PropertyName) {
case "ProductID":
case "ImageData":
case "ImageMimeType":
// do nothing
break;
default:
<div class="form-group">
<label>@(property.DisplayName ??
property.PropertyName)</label>
@if (property.PropertyName == "Description") {
@Html.TextArea(property.PropertyName, null,
new { @class = "form-control", rows = 5 })
} else {
@Html.TextBox(property.PropertyName, null,
new { @class = "form-control" })
}
@Html.ValidationMessage(property.PropertyName)
</div>
break;
}
}
<div class="form-group">
<div style="position:relative;">
<label>Image</label>
<a class='btn' href='javascript:;'>
Choose File...
<input type="file" name="Image" size="40"
style="position:absolute;z-index:2;top:0;
left:0;filter: alpha(opacity=0); opacity:0;
backgroundcolor:
transparent;color:transparent;"
onchange='$("#upload-fileinfo").
html($(this).val());'>
</a>
<span class='label label-info' id="upload-file-info">
</span>
</div>
@if (Model.ImageData == null) {
313
<div class="form-control-static">No Image</div>
} else {
<img class="img-thumbnail" width="150" height="150"
src="@Url.Action("GetImage", "Product",
new { Model.ProductID })" />
}
</div>
</div>
<div class="panel-footer">
<input type="submit" value="Save" class="btn btn-primary" />
@Html.ActionLink("Cancel and return to List", "Index", null, new {
@class = "btn btn-default"
})
</div>
}<
/div>
You may already be aware that Web browsers will upload files properly only when the HTML form element defines an
enctype value of multipart/form-data. In other words, for a successful upload, the form element must look
like this:
...
<form action="/Admin/Edit" enctype="multipart/form-data" method="post">
...
Without the enctype attribute, the browser will transmit only the name of the file and not its content, which is no use at all.
To ensure that the enctype attribute appears, I must use an overload of the Html.BeginForm helper method that lets
me specify HTML attributes, like this:
...
@using (Html.BeginForm("Edit", "Admin",
FormMethod.Post, new { enctype = "multipart/form-data" })) {
...
There are two other changes in the view. The first is that I have replaced the Razor if expression I used when generating
input elements with a switch statement. The effect is the same, but it allows me to specify the model properties I want to
skip more concisely, and I don’t want to display the image-related properties directly to the user.
Instead, I have made the remaining change, which is to add an input element whose type is file to allow file upload, along
with an img element to display the image associated with a product, if there is one in the database.
The horrific mess of inline CSS and JavaScript addresses a shortcoming in the Bootstrap library: it does not properly style file
input elements. There are a number of extensions that add the missing functionality, but I have chosen the magic incantation
shown in the listing because it is self-contained and is reliable. It doesn’t change the way that the MVC Framework works, just the
way in which the elements in the Edit.cshtml file are styled.
Saving Images to the Database
I need to enhance the POST version of the Edit action method in the Admin controller so that I take the image data that has
been uploaded and save it in the database. Listing 12-12 shows the changes that are required.
Listing 12-12. Handling Image Data in the AdminController.cs File
using System.Linq;
using System.Web;
using System.Web.Mvc;
using SportsStore.Domain.Abstract;
314
using SportsStore.Domain.Entities;
namespace SportsStore.WebUI.Controllers {
[Authorize]
public class AdminController : Controller {
private IProductRepository repository;
public AdminController(IProductRepository repo) {
repository = repo;
}
public ViewResult Index() {
return View(repository.Products);
}
public ViewResult Edit(int productId) {
Product product = repository.Products
.FirstOrDefault(p => p.ProductID == productId);
return View(product);
}
[HttpPost]
public ActionResult Edit(Product product, HttpPostedFileBase image
= null) {
if (ModelState.IsValid) {
if (image != null) {
product.ImageMimeType = image.ContentType;
product.ImageData = new byte[image.ContentLength];
image.InputStream.Read(product.ImageData, 0,
image.ContentLength);
}
repository.SaveProduct(product);
TempData["message"] = string.Format("{0} has been saved",
product.Name);
return RedirectToAction("Index");
} else {
// there is something wrong with the data values
return View(product);
}
}
public ViewResult Create() {
return View("Edit", new Product());
}
[HttpPost]
public ActionResult Delete(int productId) {
Product deletedProduct = repository.DeleteProduct(productId);
if (deletedProduct != null) {
TempData["message"] = string.Format("{0} was deleted",
deletedProduct.Name);
}
return RedirectToAction("Index");
}
315
}
}
I have added a new parameter to the Edit method, which the MVC Framework uses to pass the uploaded file data to the
action method. I check to see if the parameter value is null; if it is not, I copy the data and the MIME type from the parameter
to the Product object so that it is saved to the database. I must also update the EFProductRepository class in the
SportsStore.Domain project to ensure that the values assigned to the ImageData and ImageMimeType
properties are stored in the database. Listing 12-13 shows the required changes to the SaveProduct method.
Listing 12-13. Ensuring That the Image Values Are Stored in the Database in the EFProductRepository.cs File
...
public void SaveProduct(Product product) {
if (product.ProductID == 0) {
context.Products.Add(product);
} else {
Product dbEntry = context.Products.Find(product.ProductID);
if (dbEntry != null) {
dbEntry.Name = product.Name;
dbEntry.Description = product.Description;
dbEntry.Price = product.Price;
dbEntry.Category = product.Category;
dbEntry.ImageData = product.ImageData;
dbEntry.ImageMimeType = product.ImageMimeType;
}
}
context.SaveChanges();
}.
..
Implementing the GetImage Action Method
In Listing 12-11, I added an img element whose content was obtained through a GetImage action method on the
Product controller. I am going to implement this action method so that I can display images contained in the database. Listing
12-14 shows the definition of the action method.
Listing 12-14. The GetImage Action Method in the ProductController.cs File
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using SportsStore.Domain.Abstract;
using SportsStore.Domain.Entities;
using SportsStore.WebUI.Models;
namespace SportsStore.WebUI.Controllers {
public class ProductController : Controller {
private IProductRepository repository;
public int PageSize = 4;
public ProductController(IProductRepository productRepository) {
316
this.repository = productRepository;
}
public ViewResult List(string category, int page = 1) {
ProductsListViewModel model = new ProductsListViewModel {
Products = repository.Products
.Where(p => category == null || p.Category ==
category)
.OrderBy(p => p.ProductID)
.Skip((page - 1) * PageSize)
.Take(PageSize),
PagingInfo = new PagingInfo {
CurrentPage = page,
ItemsPerPage = PageSize,
TotalItems = category == null ?
repository.Products.Count() :
repository.Products.Where(e => e.Category ==
category).Count()
},
CurrentCategory = category
};
return View(model);
}
public FileContentResult GetImage(int productId) {
Product prod = repository.Products
.FirstOrDefault(p => p.ProductID == productId);
if (prod != null) {
return File(prod.ImageData, prod.ImageMimeType);
} else {
return null;
}
}
}
}
This method tries to find a product that matches the ID specified by the parameter. The FileContentResult class is
used as the result from an action method when you want to return a file to the client browser, and instances are created using the
File