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).

7 Comments

Join the conversation! Your thoughts help the community grow.

Pedro Amaro4y ago
Anyway to add a delete button to delete from db Kishan Choudhary
RATANJEET SINGH7y ago
Nice work. thanks kishan, you also gave chance to developer to do more work on MVC.
ahmet kalender7y ago
After saving image file , not showing all list of images. This below message is displayed. Help please. {"success":true,"Caption":"tt"}
Jaygovind Chauhan8y ago
Osm coding first time i seen...and this is i looking from long time..thankz buddy
Kashif Asif9y ago
nice artcle keep it up
Nagaraj S9y ago
Nice article. Could you please update in which version of visual studio that your source code support.
- Kishan Choudhary9y ago
  Thanks Nagaraj. I am using Visual Studio 2015 version for this example. You can use any version of Visual Studio, if you are creating an application from fresh or you have an existing application, condition is only that it should support MVC and Entity Framework.