Upload Image page in Photo Gllary

• This page is rendered when user clicks on particluar album.
• This page shows the images uploaded to the album clicked.
• This page allows user to upload images to the album. 
• The user can also delete individual image.
• The user can view image in high resolution by clicking on the image. 

Screenshot :

This page is rendered when user is redirected to below Action method :

Action Method to render above page :

public ActionResult GetImages(string album)
        {
            if(Session["AlbumFromDelete"] != null && album == null)
            album = Session["AlbumFromDelete"].ToString();
            if (album != null)
            {
                Session["AlbumName"] = album;
            }
            if(TempData["InvalidImage"] != null )
            {
                ViewBag.InvalidFormat = true;
            }
            else
            {
                ViewBag.InvalidFormat = false;
            }
            ImageViewModel model = new ImageViewModel();
            Gallary gallary = new Gallary();
            Session["AlbumId"] = gallary.GetAlbumIdByAlbumNameUserId(Session["AlbumName"].ToString(), Convert.ToInt32(Session["UserId"]));
            model.AlbumName = album;
            if(Session["AlbumName"] != null && album != null)
            {
                Session["AlbumName"] = album;
            }
            model.ImageList = gallary.GetImageListForAlbum(Convert.ToInt32(Session["AlbumId"]), Convert.ToInt32(Session["UserId"]));
            return View(model);
        }

We have used ImageViewModel for this view. This method fetches the images stored in database for this album. These images are then shown on UI.

ImageViewModel :

public class ImageViewModel
    {
        public List ImageList { get; set; }

        public string AlbumName { get; set; }

        public string FileExtension { get; set; }

        [ImageValidator]
        public HttpPostedFileBase File { get; set; }
    }

Service method used in Above Action method :

public int GetAlbumIdByAlbumNameUserId(string albumName,int userId)
        {
            using(GallaryDataContext dbContext = new GallaryDataContext())
            {
                return dbContext.Albums.Where(album => album.AlbumName == albumName && album.UserId == userId).Single().AlbumId;
            }
        }

        public List<Images> GetImageListForAlbum(int albumId,int userId)
        {
            List<Images> imageList = null;
            using(GallaryDataContext gallaryDataContext = new GallaryDataContext())
            {
                imageList = gallaryDataContext.Images.Where(images => images.AlbumId == albumId && images.UserId == userId).ToList();
            return imageList;
            }
        }

Uploading new Image :

We have used file control to select an image. We have rendered a form which contains the file control. On upload click the form is posted to below Action method :

[HttpPost]
        public ActionResult UploadImage(ImageViewModel imageViewModel)
        {
            if (ModelState.IsValid)
            {
                Gallary gallary = new Gallary();
                gallary.SavePlayerImage(imageViewModel, Convert.ToInt32(Session["UserId"]),
                                        Convert.ToInt32(Session["AlbumId"]));
                return RedirectToAction("GetImages", new { album = imageViewModel.AlbumName.ToString() });
            }
            else
            {
                TempData["InvalidImage"] = "Upload images only";
                return RedirectToAction("GetImages", new { album = imageViewModel.AlbumName.ToString() });
            }
        }

Upload Image Action :

[HttpPost]
        public ActionResult UploadImage(ImageViewModel imageViewModel)
        {
            if (ModelState.IsValid)
            {
                Gallary gallary = new Gallary();
                gallary.SavePlayerImage(imageViewModel, Convert.ToInt32(Session["UserId"]),
                                        Convert.ToInt32(Session["AlbumId"]));
                return RedirectToAction("GetImages", new { album = imageViewModel.AlbumName.ToString() });
            }
            else
            {
                TempData["InvalidImage"] = "Upload images only";
                return RedirectToAction("GetImages", new { album = imageViewModel.AlbumName.ToString() });
            }
        }

SavePlayerImage Service Method :

public void SavePlayerImage(ImageViewModel model,int userId,int albumId)
        {
            byte[] imageBytes = ConvertToBytes(model.File);
            Images playerImage = new Images();
            playerImage.AlbumId = albumId;
            playerImage.UserId = userId;
            playerImage.ImageBytes = imageBytes;
            playerImage.Extension = model.File.ContentType;
            using(GallaryDataContext gallaryDataContext = new GallaryDataContext())
            {
                gallaryDataContext.Images.InsertOnSubmit(playerImage);
                gallaryDataContext.SubmitChanges();
            }
        }

The above service methos saves the image bytes in the database. The raw image file is first converted to bytes and then it is saved into the database.

Convert Image to Bytes :

public byte[] ConvertToBytes(HttpPostedFileBase Image)
        {
            byte[] imageBytes = null;
            BinaryReader reader = new BinaryReader(Image.InputStream);
            imageBytes = reader.ReadBytes((int)Image.ContentLength);
            return imageBytes;
        }

Delete Image Action:

public ActionResult DeleteImage(int imageId)
        {
            Gallary gallary = new Gallary();
            gallary.DeleteImage(imageId, Convert.ToInt32(Session["UserId"]));
            Session["AlbumFromDelete"] = Session["AlbumName"].ToString();
            return RedirectToAction("GetImages", new { album = Session["AlbumName"].ToString() });
        }

• This method is called when user clicks the Delete link under the image.
• This action method calls a service method which deletes the image using stored procedure.

DeleteImage Service Method :

public void DeleteImage(int imageId, int userId)
        {
            using(GallaryDataContext db = new GallaryDataContext())
            {
                db.Delete_Image(userId, imageId);
            }
        }

The service method accepts imageId and userId and passes it to the Delete_Image method which calls an store procedure and deletes the image.

Stored Procedure :

High Resolution :

public WebImage GetImage(int id)
        {
            Gallary gallary = new Gallary();
            byte[] ImageBytes = gallary.GetImageBytes(id);
            return new WebImage(ImageBytes).Write("jpeg");
        }

When user clicks on an image, the above action method is called and it returns the image in higher resolution.