Creating A Database-Driven MVC Image Gallery With Thumbnails

What we will cover in this article - 

 

In this article, I am going to cover the following steps.

• Store images in database
• Retrieve images from the database
• Create image thumbnail from the database images
• Upload images through AJAX
• MVC image gallery
• FancyBox gallery

Create Database  

 

Let's begin with creating a database with your preferred name, and let's create two tables into it.

CREATE TABLE [dbo].[WebFiles](
    [Id] [int] IDENTITY(1,1) NOT NULL,
    [Data] [varbinary](max) NULL,
    [IsActive] [bit] NOT NULL,
    [UpdateDate] [datetime] NOT NULL,
    [FileName] [nvarchar](max) NULL,
    [FileExt] [nvarchar](max) NULL,
    [FileLength] [int] NOT NULL,
    [ContentType] [nvarchar](max) NULL
 CONSTRAINT [PK_WebFiles] PRIMARY KEY CLUSTERED
(
    [Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]


CREATE TABLE [dbo].[Gallery](
    [Id] [int] IDENTITY(1,1) NOT NULL,
    [Title] [nvarchar](max) NULL,
    [WebImageId] [int] NOT NULL,
    [IsActive] [bit] NOT NULL,
    [OrderNo] [int] NULL,
 CONSTRAINT [PK_Gallery] PRIMARY KEY CLUSTERED
(
    [Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

The "WebFiles" table will store all the files in separate table while the "Gallery " table will store the details of images. You can add additional columns in gallery if you need.

 

Create MVC Application

 

Now, create an MVC application with no authentication option.

 

 

 

Add New EDMX file

 

I am using Database-First approach for using Entity Framework. So, create an edmx file and add both the tables created in the database.

Now, it should look like the following.

 

 

Update Layout.cshtml page

 

Now, update your default layout.cshtml page. We need to add link to 'gallery admin page' and 'Gallery' page.

<div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("Upload", "Index", "GalleryAdmin")</li>
                    <li>@Html.ActionLink("Gallery", "Index", "Gallery")</li>
                </ul>
            </div>

Image Upload (Gallery Admin)

 

For uploading images through AJAX and saving them in database, we need to create a new Controller. So, create a new Controller with the name GalleryAdminController, inside the Controllers folder. 

 

If not present, add Index action inside Controller as following.

public ActionResult Index()
{
      return View();
}

Create View for Index (index.cshtml)

@{
    ViewBag.Title = "Gallery Admin";
}

<h2>Gallery Admin</h2>
<div id="ImagePanel" data-url="@Url.Action("Create")">
    @Html.Action("Create")
</div>
<div class="row">
    <div class="col-md-offset-2 col-md-10">
        <div class="alert alert-danger" style="display:none" role="alert" id="errormessage"></div>
        <div class="alert alert-success" style="display:none" role="alert" id="successmessage"></div>
    </div>
</div>
<hr />
<div id="ListPanel" data-url="@Url.Action("_List")">
    @Html.Action("_List")
</div>

Here, we need two partial views (action)- create and list. So, we can update them after successfully adding a new image. Now, add HttpGet Action for displaying 'create' partial page. Remember to use PartialView as return. 

public ActionResult Create()
{
  ImageEditorViewModel vm = new ImageEditorViewModel();
  return PartialView(vm);
}

 As we are using ViewModel, create a new class ImageEditorViewModel.

public class ImageEditorViewModel
{
 public int Id { get; set; }
 [Required]
 public string Caption { get; set; }

 [Required]
 public HttpPostedFileBase FileImage { get; set; }

 internal static Gallery getEnityModel(ImageEditorViewModel model)
 {
   return new Gallery
   {
     IsActive = true,
     Title = model.Caption,
     OrderNo = 0,
   };
 }
}

Now, add a new View for 'create' as Create.cshtml. Remember to add jQuery validation library to enable client-side validation.

@model ImageGallery.ViewModel.ImageEditorViewModel

@using (Html.BeginForm("Create", "GalleryAdmin", FormMethod.Post, new { enctype = "multipart/form-data", Id="frmAddImage" }))
{
    <div class="form-horizontal">
        <h4>Add Image Here</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Caption, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Caption, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Caption, "", new { @class = "text-danger" })
            </div>
        </div>


        <div class="form-group">
            <div class="col-md-2">
                <label class="pull-right">  Image:</label>
            </div>
            <div class="col-md-9">
                @Html.TextBoxFor(m => m.FileImage, new { type = "file" })
                @Html.ValidationMessageFor(model => model.FileImage, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" id="btnAddImage" value="Create" class="btn btn-primary" />
            </div>

        </div>
    </div>
}
@Scripts.Render("~/bundles/jqueryval")

This will generate the UI for our View. Now, add some JavaScript code in create.cshtml file to post this form through AJAX. 

<script type="text/javascript">

    $(function () {
        $("#btnAddImage").on("click", function (e) {
            var $form = $("#frmAddImage");
            $form.validate();
            if (!$form.valid()) {
                return false;
            }

            e.preventDefault();
            var formData = new FormData();
            var data = $form.find(':input[name]:not(:disabled)').filter(':not(:checkbox), :checked').map(function () {
                var input = $(this);

                if (input.attr('type') == "file") {

                    formData.append(input.attr('name'), input[0].files[0]);
                    return {
                        name: input.attr('name'),
                        value: input[0].files[0]
                    };
                } else {
                    formData.append(input.attr('name'), input.val());
                    return {
                        name: input.attr('name'),
                        value: input.val()
                    };
                }
            }).get();

            $.ajax({
                url: '/GalleryAdmin/Create',
                data: formData,
                type: "POST",
                contentType: false,
                processData: false,
                success: function (data, textStatus, jqXHR) {
                    if (data.success == true) {
                        $("#successmessage").html(data.Caption + " has been added successfully").show().delay(5000).fadeOut();
                        $("#ListPanel").load($("#ListPanel").data("url"));
                        $("#ImagePanel").load($("#ImagePanel").data("url"));
                        return true;
                    }
                    if (data.ExceptionMessage) {
                        $("#errormessage").html(data.ExceptionMessage).show().delay(5000).fadeOut();
                        return false;
                    }
                    if (data.ValidationMessage) {
                        $("#errormessage").html(data.ExceptionMessage).show().delay(5000).fadeOut();
                        return false;
                    }
                    return false;
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    $("#errormessage").html(textStatus).show().delay(5000).fadeOut();
                },
                complete: function (jqXHR, textStatus) {
                }
            });

        });
    });
</script>

Here, first I am validating the form, then adding all controls and file inputs in formdata object. Then, I am submitting the data to the server through AJAX post request. On success, I am refreshing the "create" partial view and "list" partial view. If there is any error, I am displaying message to UI.

 

Now, let's add an action method in GalleryAdminController to save this posted data in the database.

[HttpPost]
public ActionResult Create(ImageEditorViewModel model)
{
  try
  {
     if (ModelState.IsValid)
     {
        ImageGalleryEntities db = new ImageGalleryEntities();
        var fileModel = WebFileViewModel.getEntityModel(model.FileImage);
        db.WebFiles.Add(fileModel);
        db.SaveChanges();

        var entity = ImageEditorViewModel.getEnityModel(model);
        entity.WebImageId = fileModel.Id;
        entity.OrderNo = db.Galleries.Count() > 0 ? db.Galleries.Max(x=> x.OrderNo) + 1 : 1;
        db.Galleries.Add(entity);
        db.SaveChanges();

        return Json(new { success = true, Caption = model.Caption });
       }

       return Json(new { success = false, ValidationMessage = "Please check validation messages" });
     }
     catch (Exception ex)
     {
        return Json(new { success = false, ExceptionMessage = "Some error here" });
      }
  }
}

This will save your records in Gallery and WebFiles Table. You need to add one for ViewModel for creating object of webfile and get information from posted file as WebFileViewModel.

public class WebFileViewModel
{
       public static WebFile getEntityModel(HttpPostedFileBase file)
       {
           WebFile webfile = new WebFile();
           MemoryStream target = new MemoryStream();
           file.InputStream.CopyTo(target);
           byte[] data = target.ToArray();
           webfile.Data = data;
           webfile.ContentType = file.ContentType;
           webfile.FileExt = Path.GetExtension(file.FileName);
           webfile.FileLength = file.ContentLength;
           webfile.FileName = file.FileName;
           webfile.IsActive = true;
           webfile.UpdateDate = DateTime.Now;
           return webfile;
       }
}

Now, let's create a list of images for displaying in admin page. For that, create an action method with name _List as following.

public ActionResult _List()
{
   ImageGalleryEntities db = new ImageGalleryEntities();
   var list = db.Galleries.OrderBy(x => x.OrderNo)
                        .Select(x => new ImageList
                        {
                            Id = x.Id,
                            IsActive = x.IsActive,
                            OrderNo = x.OrderNo,
                            WebImageId = x.WebImageId,
                            Title = x.Title
                        }).ToList();

    return PartialView(list);
}

Then, ceate a View page _List.cshtml and add the following code.

@model IEnumerable<ImageGallery.ViewModel.ImageList>

<ul style="list-style:none;" class="row">
    @foreach (var item in Model)
    {
        <li class="col-md-3">
            <br />
            <img class="img" src="@Url.Action("GetImage", "DownloadFile", new { Area ="" , Id= item.WebImageId, t =2 })"
             style="width:100%;height:180px;" />
            <br />
            <label>@item.Title</label>
            <br />
            <br />
        </li>
    }
</ul>

Here, I am using parameter  as 2 for creating thumbnails with the multiplier of 2. (Check below for DownloadFile Controller).

 

This will be all for admin page. When you run the application, it will be displaying something like this.



Images Download

Add a new Controller named DownloadFileController inside the Controllers folder, and add the following code inside this class.

[OutputCache(Duration = 60, Location = OutputCacheLocation.Any, VaryByParam = "Id;t")]
 public ActionResult GetImage(int Id = 0, int t = 0)
 {
    if (Id == 0)
    {
       return HttpNotFound();
    }

    ImageGalleryEntities db = new ImageGalleryEntities();

    var model = db.WebFiles.Find(Id);

    if (model != null)
    {
       if (t != 0)
       {
          byte[] img = getThumbNail(model.Data, t);
          return File(img, model.ContentType, "thumb_" + model.FileName);
       }

       return File(model.Data, model.ContentType, model.FileName);
    }
    else
    {
       return HttpNotFound();
    }
 }

In this action method, I am passing two parameters - 1st for image id and second for its size. I am passing a "not found" error when file is not found in the database or user has not passed anything in Id parameter. You can also replace it with any default "noimagefound" url.

 

Then, if we will not pass parameter t, it will return a full size image to client else it will return a thumbnail of the image in multiplier of t. Let's add getThumbNail method inside Controller.

private byte[] getThumbNail(byte[] data, int multi = 1)
{
    using (var file = new MemoryStream(data))
    {
       int width = 200 * multi;
       using (var image = Image.FromStream(file, true, true)) /* Creates Image from specified data stream */
       {
          int X = image.Width;
          int Y = image.Height;
          int height = (int)((width * Y) / X);

          using (var thumb = image.GetThumbnailImage(width, height, () => false, IntPtr.Zero))
          {
             var jpgInfo = ImageCodecInfo.GetImageEncoders()
                            .Where(codecInfo => codecInfo.MimeType == "image/png").First();
             using (var encParams = new EncoderParameters(1))
             {
                using (var samllfile = new MemoryStream())
                {
                   long quality = 100;
                   encParams.Param[0] = new EncoderParameter(Encoder.Quality, quality);
                   thumb.Save(samllfile, jpgInfo, encParams);
                   return samllfile.ToArray();
                }
             };
          };
       };
     };
}

Create Gallery

This part will be easier than the above one. We just need to list our images and then add reference for fancy box. For this, we will create a new Controller named GalleryController and add two action methods - Index and _List.

public ActionResult Index()
{
    return View();
}

public ActionResult _List()
{
    ImageGalleryEntities db = new ImageGalleryEntities();
    var list = db.Galleries.OrderBy(x => x.OrderNo)
                        .Select(x => new ImageList
                        {
                            Id = x.Id,
                            IsActive = x.IsActive,
                            OrderNo = x.OrderNo,
                            WebImageId = x.WebImageId,
                            Title = x.Title
                        }).ToList();

    return PartialView(list);
}

Then, create index.cshtml.

<h2>Gallery</h2>
<hr />
<link href="~/Scripts/fancy-box/jquery.fancybox.min.css" rel="stylesheet" />

@Html.Action("_List")

<script src="~/Scripts/fancy-box/jquery.fancybox.min.js"></script>

You need to download fancybox 3 and add reference of it's CSS and JS files as in the above code. In sample project, it is already included.

Then, create _List.cshtml.

@model IEnumerable<ImageGallery.ViewModel.ImageList>

<ul style="list-style:none;" class="row">
    @foreach (var item in Model)
    {
        <li class="col-md-3">
            <br />
            <a data-fancybox="gallery" data-caption="@item.Title"
               href="@Url.Action("GetImage", "DownloadFile", new { Area ="" , Id= item.WebImageId })">
               <img class="img" src="@Url.Action("GetImage", "DownloadFile", new { Area ="" , Id= item.WebImageId, t =2 })"
               style="width:100%;height:180px;" />
            </a>
            <br />
            <label>@item.Title</label>
            <br />
            <br />
        </li>
    }
</ul>

Your"Image Gallery" is ready and it will look like the following.

 

 

 

Summary 

 

The process of creating a gallery looks difficult but it is very easy. This article has covered most of the issues faced by the developers when creating gallery with storing images in database. You can download the complete source code from the above link or you can get it from GitHub (MVC Image Gallery).