title: Upload Image, Save to Database, Create Thumbnail and Display in View
body: <p>I am building an Image Gallery mostly for learning ASP.Net MVC. After many hours of googling and stackoverflowing, I have finally accomplished the goal of uploading image, saving to database, creating a thumbnail and showing in View. My code shown below is bloated to say the least and I am looking for any kind suggestion on how to improve it.</p>
  
  <p>Here is the View form input</p>
  
  <pre><code>&lt;div class="form-group"&gt;
  @Html.LabelFor(model =&gt; model.ImageData, new { @class = "control-label col-md-2" })
  &lt;div class="col-md-10"&gt;
  &lt;input name="Image" type="file" /&gt;
  @Html.ValidationMessageFor(model =&gt; model.ImageData)
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the Create Action in the Controller</p>
  
  <pre><code>public ActionResult Create(ArtWork artwork, HttpPostedFileBase image)
          {
             if (ModelState.IsValid)
              {
                  if (image != null)
                  {
                      //attach the uploaded image to the object before saving to Database
                      artwork.ImageMimeType = image.ContentLength;
                      artwork.ImageData = new byte[image.ContentLength];
                      image.InputStream.Read(artwork.ImageData, 0, image.ContentLength);
  
                      //Save image to file
                      var filename = image.FileName;
                      var filePathOriginal = Server.MapPath("/Content/Uploads/Originals");
                      var filePathThumbnail = Server.MapPath("/Content/Uploads/Thumbnails");
                      string savedFileName = Path.Combine(filePathOriginal, filename);
                      image.SaveAs(savedFileName);
  
                      //Read image back from file and create thumbnail from it
                      var imageFile = Path.Combine(Server.MapPath("~/Content/Uploads/Originals"), filename);
                      using (var srcImage = Image.FromFile(imageFile))
                      using (var newImage = new Bitmap(100, 100))
                      using (var graphics = Graphics.FromImage(newImage))
                      using (var stream = new MemoryStream())
                      {
                          graphics.SmoothingMode = SmoothingMode.AntiAlias;
                          graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
                          graphics.PixelOffsetMode = PixelOffsetMode.HighQuality;
                          graphics.DrawImage(srcImage, new Rectangle(0, 0, 100, 100));
                          newImage.Save(stream, ImageFormat.Png);
                          var thumbNew = File(stream.ToArray(), "image/png");
                          artwork.ArtworkThumbnail = thumbNew.FileContents;
                      }                
                  }
  
                 //Save model object to database
                  db.ArtWorks.Add(artwork);
                  db.SaveChanges();
                  return RedirectToAction("Index");
              }
  
              return View(artwork);
          }
  </code></pre>
  
  <p>And here is a Action method to get the Thumbnail from Database</p>
  
  <pre><code>public FileContentResult GetThumbnailImage(int artworkId)
          {
              ArtWork art = db.ArtWorks.FirstOrDefault(p =&gt; p.ArtWorkId == artworkId);
              if (art != null)
              {
                  return File(art.ArtworkThumbnail, art.ImageMimeType.ToString());
              }
              else
              {
                  return null;
              }
          }
  </code></pre>
  
  <p>And finally to display in the view here,</p>
  
  <pre><code>&lt;td&gt;
              &lt;img src="@Url.Action("GetThumbnailImage", "Artwork", new { Model.ArtWorkId })" alt="Artwork Image" /&gt;
          &lt;/td&gt;
  </code></pre>
  
  <p>Like I said, this works, but I am sure there will be better ways to upload, save and retrieve images from the database using ASP.Net and Entity Framework.</p>