Store Image in Database using Asp.Net MVC.

Here this  Session I will show you how to store Image file in database table using MVC5.

let give the hint first.

1.First Create the table , field name Image.
2.Datatype use VarBinary.
3.Image is Converted to bytes.

1> Create a Table name Image

Create TABLE [dbo].[Images](
[Id] [int] IDENTITY(1,1) NOT NULL,
[Name] [varchar](500) NULL,
[Image] [varbinary](max) NULL,
[Extension] [varchar](500) NULL,
[Status] [bit] NULL,
 CONSTRAINT [PK_Images] 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]




2>Create  A model for Image Table


Map with DbSet<Image> imagecontext{get;set;}
So that we can do read and right operation. for further detail please follow second post of my blog page. here link:-     http://technicalviewpoint.blogspot.in/2016/07/simple-application-with-insert-update.html


3>Now we Create Controller for Post the data from View for Image.

1. first call dbcontext file access table of database which is mapped in DefaultConnection, Create an       object for DefaultConnection
  DefaultConnection connection = new DefaultConnection(); 
2. Create a method for convert Image into byte  => ConvertToByteFormat(HttpPostedFileBase file)
3. Create method for Uploading image to Dbase =>ImageUploadtodatabase(HttpPostedFileBase file)
4. Now Call ImageUploadtodatabase to [HttpPost] Index action .

Here my Code:-


using ItsMe.Areas.Admin.Models;
using ItsMe.Models;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace ItsMe.Areas.Admin.Controllers
{
    public class ImagesController : Controller
    {
        DefaultConnection connecion = new DefaultConnection();


        public byte[] ConvertToByteFormat(HttpPostedFileBase image)
        {
            byte[] imgBytes = null;
            BinaryReader reader = new BinaryReader(image.InputStream);
            imgBytes = reader.ReadBytes((int)image.ContentLength);
            return imgBytes;

        }


        public void ImageUploadtodatabase(HttpPostedFileBase file)
        {
            Images img = new Images();
            img.Extension = file.ContentType;
            img.Name = file.FileName;
            img.Picture = ConvertToByteFormat(file);
            connecion.imageContext.Add(img);
            connecion.SaveChanges();
        }


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

        [HttpPost]
        public ActionResult Index(HttpPostedFileBase file)
        {
            ImageUploadtodatabase(file);
            return View();
        }
    }
}


4> Now Create a view for an Index Page, So that we can add upload button and submit button

input type="file" => File upload buttom,
input type="Submit" Post the data to Controller.

@using (Html.BeginForm("Index","Images", FormMethod.Post, FormMethod.Post, new { enctype = "multipart/form-data" , id ="file"}))
{
    <input type="file" name="file" id="file" value="file"/>
    <input type="submit" value="upload" />


}

5>Run the Project  and Upload the Image.




6> Open the data base table Image and Look the Picture Field <Binary data> will visible.


Thank you...

Share this

Previous
Next Post »