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

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

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

CREATE TABLE [dbo].[image](
    [id] [int] IDENTITY(1,1) NOT NULL,
    [Name] [varchar](50) NULL,
    [img] [image] NULL,
 CONSTRAINT [PK_image] 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]

GO

Now open Visual Studio and create a project.

After that, create an entity data model as below,

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

Now add a controller as follows,

The empty controller is found as follows, 

Follow the steps below to generate HTML view,

Step 1

Click on the right side,

 

Step 2

When clicking on the Add view, you will see the following box

 

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,

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>image</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
            </div>
        </div>

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

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.

Now check all these settings in the browser,

This is working nicely.

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

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

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

[HttpPost]
        public ActionResult Index( image objImg, HttpPostedFileBase image)
        {

            if (ModelState.IsValid)
            {
                if (image != null)
                {
                    objImg.img = new byte[image.ContentLength];
                    image.InputStream.Read(objImg.img, 0, image.ContentLength);
                    DbObj.images.Add(objImg);
                    DbObj.SaveChanges();
                    return RedirectToAction("Index");

                }
            }
            return RedirectToAction("Index");
        }

Now check whether it is working or not,

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

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,

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

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

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,

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

The HTML view is generated as it appears below,

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

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

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.

I hope this will work in your next project.