Upload Image In Database And Retrieve From Database With Image Preview Using MVC

In this article, you will learn how to store images in the database and retrieve them from the database.

While developing the application, there is a need to store the images.

So let's do it with a database table script as below,

  1. CREATE TABLE [dbo].[image](  
  2.     [id] [int] IDENTITY(1,1) NOT NULL,  
  3.     [Name] [varchar](50) NULL,  
  4.     [img] [image] NULL,  
  5.  CONSTRAINT [PK_image] PRIMARY KEY CLUSTERED   
  6. (  
  7.     [id] ASC  
  8. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ONON [PRIMARY]  
  9. ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]  
  10.   
  11. GO  

Now open Visual Studio and create a project.

After that, create an entity data model as below,

Upload Image In Database And Retrieve From Database With Image Preview Using MVC

Here you can see the table, which we have generated before

Now add a controller as follows,

Upload Image In Database And Retrieve From Database With Image Preview Using MVC

The empty controller is found as follows, 

Upload Image In Database And Retrieve From Database With Image Preview Using MVC

Follow the steps below to generate HTML view,

Step 1

Click on the right side,
 
Upload Image In Database And Retrieve From Database With Image Preview Using MVC

Step 2

When clicking on the Add view, you will see the following box
 
Upload Image In Database And Retrieve From Database With Image Preview Using MVC

After that, you can see the view name. Leave it as you will see its name (Index)

Step 3

Then select create for the template

Step 4

Then select model class which is already made (if you cannot see it, please rebuild solution)

Step 5

Then click on the add button

After that you can see the HTML view,

  1. @using (Html.BeginForm())   
  2. {  
  3.     @Html.AntiForgeryToken()  
  4.       
  5.     <div class="form-horizontal">  
  6.         <h4>image</h4>  
  7.         <hr />  
  8.         @Html.ValidationSummary(true""new { @class = "text-danger" })  
  9.         <div class="form-group">  
  10.             @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })  
  11.             <div class="col-md-10">  
  12.                 @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })  
  13.                 @Html.ValidationMessageFor(model => model.Name, ""new { @class = "text-danger" })  
  14.             </div>  
  15.         </div>  
  16.   
  17.         <div class="form-group">  
  18.             <div class="col-md-offset-2 col-md-10">  
  19.                 <input type="submit" value="Create" class="btn btn-default" />  
  20.             </div>  
  21.         </div>  
  22.     </div>  
  23. }  

We need to make a few changes in HTML view. The controls will be required to upload an image, display an image preview and with an onChange JavaScript event also added.

Upload Image In Database And Retrieve From Database With Image Preview Using MVC

Now check all these settings in the browser,

Upload Image In Database And Retrieve From Database With Image Preview Using MVC

This is working nicely.

Now let’s add a post method, this method will store the image in a database.

Upload Image In Database And Retrieve From Database With Image Preview Using MVC

Here we will need to make some changes in HTML view code snippet as follow,

Upload Image In Database And Retrieve From Database With Image Preview Using MVC

Here's the post action method, which is to perform the data save,

  1. [HttpPost]  
  2.         public ActionResult Index( image objImg, HttpPostedFileBase image)  
  3.         {  
  4.   
  5.             if (ModelState.IsValid)  
  6.             {  
  7.                 if (image != null)  
  8.                 {  
  9.                     objImg.img = new byte[image.ContentLength];  
  10.                     image.InputStream.Read(objImg.img, 0, image.ContentLength);  
  11.                     DbObj.images.Add(objImg);  
  12.                     DbObj.SaveChanges();  
  13.                     return RedirectToAction("Index");  
  14.   
  15.                 }  
  16.             }  
  17.             return RedirectToAction("Index");  
  18.         }  

Now check whether it is working or not,

Upload Image In Database And Retrieve From Database With Image Preview Using MVC

It is working nicely. If that does not work, then you're doing something wrong, please check,

Upload Image In Database And Retrieve From Database With Image Preview Using MVC

Here you can see that the image has stored successfully.

Now we will show the record in the list that we have added in the table.

Now let’s add a method, this method will display list,

Upload Image In Database And Retrieve From Database With Image Preview Using MVC

Now add the HTML view following, the process that has been forwarded,

Upload Image In Database And Retrieve From Database With Image Preview Using MVC

Then click on the button and then check in the browser.

Upload Image In Database And Retrieve From Database With Image Preview Using MVC

Here you can see it is working perfectly.

Now we will display the image from the database.

Let’s add the action method for an image display and write a little code for image display,

Upload Image In Database And Retrieve From Database With Image Preview Using MVC

Now add the HTML view following the process that has been forwarded,

Upload Image In Database And Retrieve From Database With Image Preview Using MVC

The HTML view is generated as it appears below,

Upload Image In Database And Retrieve From Database With Image Preview Using MVC

Now let's change a little bit in the HTML.

Upload Image In Database And Retrieve From Database With Image Preview Using MVC

Also required are changes in the list HTML, It is made by the GetData() Action.

Upload Image In Database And Retrieve From Database With Image Preview Using MVC

Now all of our changes have come to an end. Now we'll check in the browser,

When the list is open in the browser, then you can click on the show Image button and view the image.

Upload Image In Database And Retrieve From Database With Image Preview Using MVC

I hope this will work in your next project.