UPDATE: I have now combined all my MVC Image Handling blog posts into a Open Source Project. Feel free to check this out once you have read the post.
Original Blog Post:
The last post i described how to create a HTML Helper for Image Previewing. This time around we will be uploading an image to a Database, which is handled little differently than normal CRUD operations.
The following block of code shows my Create action method within my UserProfile controller:
1: public ActionResult Create(UserProfile userprofile,
2: HttpPostedFileBase imageLoad2)
3: {
4: var profileimage = new Medium();
5:
6: if (imageLoad2 != null)
7: {
8: using (Image img =
Image.FromStream(imageLoad2.InputStream))
9: {
10:
11: //--Initialise the size of the array
12: byte[] file = new byte[imageLoad2.InputStream.Length];
13:
14: //--Create a new BinaryReader and set the InputStream
//-- for the Images InputStream to the
16: //--beginning, as we create the img using a stream.
17: BinaryReader reader =
new BinaryReader(imageLoad2.InputStream);
18: imageLoad2.InputStream.Seek(0, SeekOrigin.Begin);
19:
20: //--Load the image binary.
21: file = reader.ReadBytes((int)imageLoad2.
InputStream.Length);
22:
23: //--Create a new image to be added to the database
24:
25: profileimage.Created_Date = DateTime.Now;
26: profileimage.Source = file;
27: profileimage.File_Size = imageLoad2.ContentLength;
28: profileimage.File_Name = imageLoad2.FileName;
29: profileimage.Content_Type = imageLoad2.ContentType;
30: profileimage.Height = img.Height;
31: profileimage.Width = img.Width;
32: #if DEBUG
33: profileimage.Record_Status = "T"; //--Testing.
34: #else
35: profileimage.Record_Status = " ";/--Live.
36: #endif
37:
38:
39:
40: }
41: }
42:
43: if (ModelState.IsValid)
44: {
45:
46: db.Media.AddObject(profileimage);
47: db.SaveChanges();
48:
49: return RedirectToAction("Index", "Home");
50:
51: }
52:
53: var viewModel = new UserProfileViewModel
54: {
55: UserProfile = userprofile,
56: UserTypes = userTypes
57: };
58:
59: return View(userprofile);
60: }
This method creates has two parameters, the model UserProfile, and the HttpHostedFileBase imageLoad2 is the file posted. Have a look at the previous post about building the HTML.
NB: the parameter name imageLoad2 needs to be the name of the input file from the view so that is is bound (using the MVC Model Binding). If you used a different name the parameter would be null.
The method creates a Entity Framework model Medium, which is my class to describe the SQL Table which holds the Images. The images are saved within SQL as varbinary(MAX). Quite easy really, create a BinaryReader to convert the image stream to binary, then using the EF AddObject to the entity set, then save it to the table.
There we have it. Join me next time for downloading the image, using another custom HTML Helper.
Related articles
- Inserting Image into Database in C#.NET Window Application (dotnetaid.com)
- Image Sizes and Optimizing for the Web (sueblimely.com)
- Entity Framework 4.1 Update (devcurry.com)
My Web Anecdotes 