MVC display image from database

Uploading image to database is not a normal practice but in some situations we need it, in my previous blog many people request to write to store the image into database, first of all, I would like to thanks for all those emails and interest in my blogs and site. I am going to change the database structure a little bit but use the same modal to post the data from view to controller which we used in previous blog, there is no change into create view. Before jumping to the coding part I would like to point out what you need to be careful when you are going to store the files into database

1. when you store the image into table every record will be huge due to image bytes
2. It's good to keep the image into a separate table so retrieval of record on that table cannot affect
3. Keeping separate table also give option to store as many image for a single record as we wan, by using the primary key and foreign key

First of all we will see the table structure to store the product detail with image, to store image what would be the best data type we need to use, let's see available data types to store image or file.

I planned to use image but I found this from MSDN: ntext, text, and image data types will be removed in a future version of Microsoft SQL Server. Avoid using these data types in new development work, and plan to modify applications that currently use them. Use nvarchar(max), varchar(max), and varbinary(max) instead.

So we will use varbinary(max), the good thing is that, even if your data type is image, the same code will work because we will send the byte array from model to data, so it's up to you what you want to use, here is the table structure of products

CREATE TABLE [Products] (
    [ProductId]   INT             IDENTITY (1, 1) NOT NULL,
    [ProductName] NVARCHAR (100)  NOT NULL,
    [Price]       DECIMAL (18, 2) NOT NULL,
    [CategoryId]  INT             NOT NULL,
    [Image]       VARBINARY(MAX)           NOT NULL,
    CONSTRAINT [PK_dbo.Products] PRIMARY KEY CLUSTERED ([ProductId] ASC)
);

Our get method in products controller is same as in the previous blog see this

// GET: Products/Create
public ActionResult Create()
{
    // To Bind the category drop down in search section
    ViewBag.Categories = db.Categories.Where(x => x.IsActive == true);
    var model = new ProductModel();
    return View(model);
}

We need to change our post method to save the image into database than resize in two different sizes and save into folder and update image path into database. I am not going to save two different version of image into database, if you want you can do it easy, see the previous blog to rezie the image. Before looking into complete post method let's check how we can get the byte array from posted data

using (var binaryReader = new BinaryReader(model.ImageUpload.InputStream))
    product.Image = binaryReader.ReadBytes(model.ImageUpload.ContentLength);

// model, ImageUpload property
public HttpPostedFileBase ImageUpload { get; set; }

We are reading all the bytes by using BinaryReader from the posted file in model.ImageUpload property

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(ProductModel model)
{
    // removed the code for checking image type and sizes
    // See previous article, if you need that code

    if (ModelState.IsValid)
    {
        var product = new Product();
        product.ProductName = model.ProductName;
        product.Price = model.Price;
        product.CategoryId = model.CategoryId;
        using (var binaryReader = new BinaryReader(model.ImageUpload.InputStream))
            product.Image = binaryReader.ReadBytes(model.ImageUpload.ContentLength);

        db.Products.Add(product);
        db.SaveChanges();
        return RedirectToAction("Index");
    }

    // If any error return back to the page
    ViewBag.Categories = db.Categories.Where(x => x.IsActive == true);
    return View(model);
}

How to show the bytes array as an image,

Let's say in the list page

• Convert the byte array into base 64 string
• Format this string into image data
• And use this url for image

See the complate code here

@{
    var base64 = Convert.ToBase64String(model.Image);
    var imgSrc = String.Format("data:image/gif;base64,{0}", base64);
}
<img src='@imgSrc' style="max-width:100px; max-height:100px;" />

What this code does:

• I get byte array of image in `model.Image'
• convert byte array to base64 string, if we want, we can create a method somewhere or on top of the page
• now convert base64 string to image format and store into imgSrc
• this imgSrc will be used as the image path to bind see the image tag src attribute.

If you want to see the complete listing page html then it is here:

@model IEnumerable<UploadImageToDB.Models.Product>
@{
    ViewBag.Title = "Products";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Products</h2>
<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>@Html.DisplayNameFor(model => model.ProductName)</th>
        <th>@Html.DisplayNameFor(model => model.Price)</th>
        <th>@Html.DisplayNameFor(model => model.CategoryId)</th>
        <th>@Html.DisplayNameFor(model => model.Image)</th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>@Html.DisplayFor(modelItem => item.ProductName)</td>
        <td>@Html.DisplayFor(modelItem => item.Price)</td>
        <td>@Html.DisplayFor(modelItem => item.CategoryId)</td>
        <td>
            @{
                var base64 = Convert.ToBase64String(item.Image);
                var imgSrc = String.Format("data:image/gif;base64,{0}", base64);
            }
            <img src='@imgSrc' style="max-width:100px; max-height:100px;" />
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.ProductId }) |
            @Html.ActionLink("Details", "Details", new { id=item.ProductId }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.ProductId })
        </td>
    </tr>
}
</table>

I am not going to show how to edit the record, you can try it to learn, let me know if there is anything you need more detail.

We need to be careful to restrict the use to upload

• Maximum number of images
• Maximum size of image
• Type of images

Otherwise any user can fill your database with huge files and your application will be very very slow.

Other blogs you may like

mvc search page example with code

MVC Searh page with pagination: It’s very easy to create a search page in asp.net but when I try to create the same in MVC I faced many problems, how to create model, how to keep searched values in search controls, pagination, I found myself nowhere, so start searching for some good examples but... By Ali Adravi   On 25 Aug 2013  Viewed: 40,270

MVC insert update delete and select records

CRUD (Create, Retrieve, Update and Delete) in MVC. When we start to learn new language, first we try to run an application with “Hello World” and then CRUD functionality. So in this article we will see how to select records from database (with WebGrid, pagination and sort functionality), update a... By Ali Adravi   On 17 Aug 2013  Viewed: 106,155

How to create a single thanks page for entire controller in MVC

Sometimes we need a thanks page say we have user registration, change password, activate account functionality in our application then we need a thanks page after registering with our site, to say thanks for registering with us or showing confirmation that your password is successfully changed or... By Hamden   On 30 Jun 2013  Viewed: 3,794

MVC jquery autocomplete with value and text field

In MVC, autocomplete with jquery is the best way to pull data from database and render according to our requirements, so in this article we will use jquery to show the auto complete text box without any ajax controls. We need a method to get the data from database, a controller method to handle the... By Ali Adravi   On 29 Jun 2013  Viewed: 7,051

Upload files with model data in MVC

Upload multiple files with model data in MVC is really very easy, when I started to test by uploading some files, I though it would be more complicated but it is really not. In my previous post [ASP.Net MVC file upload][1], I promised to post soon about how to upload multiple files. When I was... By Ali Adravi   On 04 Jun 2013  Viewed: 25,607