asp.net mvc: save base64 image data to table

Question

I want to capture picture from canvas, make it base64 and save it into db. Is it possible to save base64 directly to table? This is where I came already:

VIEW:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("image0");
ctx.drawImage(img, 0, 0);
//drawing image into myCanvas

var imag = canvas.toDataURL("image/png");
//making base64 from that image

document.getElementById('imag').value = imag;
//passing base64 to @Html.TextAreaFor(model => model.IMG, new {id = "imag"}) prior to submitting

MODEL:

using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.ComponentModel.DataAnnotations;

namespace myApp.Models
{ 
public class MYCLASS
    {
     public int ...
     public string ...
     public string IMG { get; set; }
    }
}

CONTROLLER:

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult myImageToDB(MYCLASS myclass)
{

   if (ModelState.IsValid)
   {
      db.MYCLASSs.Add(myclass);
      db.SaveChanges();
      //here it fails on db.SaveChanges()
      return RedirectToAction("Detail", "M35");
   }
   return View(myclass);
}

When submitted I got only this answer from MS VS:

System.Data.Entity.Validation.DbEntityValidationException: Validation failed for one or more entities.

The problem occured when I have added

public string IMG { get; set; }

into the model. And when I now disable

document.getElementById('imag').value = imag;

everything works just fine.

thx

Answer 1

Based on your error message, the error is occuring because your model doesn't fit the database rules. For instance, you are sending a null to a non-nullable value or you are trying to put too much information in a column (255 bytes in a 128 byte column). Use the information located in this link to help you discover exactly what property of the entity is failing - Validation failed for one or more entities while saving changes to SQL Server Database using Entity Framework

Now that you have done that, I see that your actual entity error is

IMG Error: The field IMG must be a string or array type with a maximum length of '4000'.

varchar(n|MAX) has a limit of 4000 IF you specify an integer when you declare it (varchar(4000)). However, using varchar(MAX) gives you 2GB of storage in that one field per record. With that, we need to look to see if you are using code first or database first in your EF implementation. If you are using code first, annotate your column with varchar(MAX) like seen below.

[Column(TypeName = "varchar(MAX)")]
public string Img {get;set;}

If you are using database first, then go to your database (Sql Management Studio), right click the table and choose design. Update the image field to varchar(MAX) as the type and save. In order to update EF, open your EF designer, delete the existing Images table, then right click the surface and choose Update model from Database and follow the steps to re-add your table.

EDIT

Based on the OP's response, we should cover how to make a large varchar column in SQL CE as well. For doing code first against SQL CE, use the following code snippet:

[Column(TypeName = "ntext")]
[MaxLength] 
public string Img {get;set;}

Answer 2

Is there a reason you need Base64? It adds overhead to having to encode and decode that out of the database. If you can, it may be better to simply store the image data (un-encoded) as a binary blob in the database. That is, if your images are of a small size.

Microsoft provides a good document (https://research.microsoft.com/pubs/64525/tr-2006-45.pdf) called "To BLOB or not to BLOB" about whether you should store images in a database. The basic rule is if you image is 256KB or less, it is OK to store in DB. If bigger than 1MB, then it is better to store the images on the filesystem and serve them directly from there in your server.

MS SQL Server 2012 can automatically manage filesystem storage of binary data for you with its new FILETABLE feature: http://blogs.msdn.com/b/mvpawardprogram/archive/2012/07/23/sql-server-2012-migrating-blobs-to-filetables.aspx