WebImage Helper and WebMatrix

Normally I don’t write about WebMatrix but I have been working on an issue for the better part of an hour and was unable to find anyone online that explained how to do this. So here it is and I hope the search engines grab it and it helps save someone some time.

I wanted to store images in my SQL CE database and I also wanted to use the WebImage helper to resize the uploaded images. I knew that datatype “WebImage” wouldn’t be acceptable input for an image column in SQL CE so I searched for help. I two people who helped me somewhat. Matt Osborne was great but he said putting the pictures in CE wasn’t as interesting as saving them to a folder. Arghhh! Anyway he also refered his readers to a “Simple Data Demo” which unfortunately I couldn’t find. His exact words were “Most of the time the API for saving to a database just take a Byte[] of the image, for instance see the Simple Data demo. The second one that save the image off to the file system is the much more interesting sample.” He was my only hope.

Then on Erik Reitan’s blog I found a listing of all the WebImage object properties and methods with no explanation. But that got me going and I was grateful. I found other blogs that gave specific instruction on how to save an uploaded file to a SQL database in the webmatrix context but I knew that the helper would have been designed to abstract away all that stream arcana and such. My problem was to simply upload a picture, resize it into a thumbnail and a small picture, and then store them both in my database.

I set forth 5 variables ‘photo’ to hold the upload which I typed as WebImage because a WebImage method was grabbing the file for me. A couple of other WebImage variables to hold the resized WebImage objects and 2 byte arrays to hold the result of the WebImage helper method GetBytes() which was the key to problem.

WebImage photo = null;
WebImage UserPicture = null;
WebImage UserThumbnail = null;
byte[] ProfileUserPicture = null;
byte[] ProfileUserThumbnail = null;

Below you will see the method that grabs the image file and that is GetImageFromRequest(“Image”).
I then do to resizes (which Matt Osbornes explains very well) and then I get the bytes and the db.Execute(SQLUPDATE) pulls both pictures right in.

photo = WebImage.GetImageFromRequest("Image");
if(photo != null){
UserPicture = photo.Clone().Resize(width: 400, height: 400, preserveAspectRatio: true, preventEnlarge: true);
UserThumbnail = photo.Clone().Resize(width: 128, height: 128, preserveAspectRatio: true, preventEnlarge: true);

ProfileUserPicture = UserPicture.GetBytes("jpeg");
ProfileUserThumbnail = UserThumbnail.GetBytes("jpeg");
ProfileUserPicture = new byte[0];
ProfileUserThumbnail = new byte[0];
var SQLUPDATE = "UPDATE Images SET UserPicture=@1, UserThumbnail=@2 WHERE UserID=@0";
var db = Database.Open("Database");
db.Execute(SQLUPDATE, ProfileUserID, ProfileUserPicture, ProfileUserThumbnail);

And, very important, you have to name the input tag the same as the parameter in the GetImageFromRequest() in this case “Image”.

So the input form markup will look like this:

<form action=”” method=”post” enctype=”multipart/form-data”>

How about a nice picture?<input type=”file” name=”Image” />

In summary, use the WebImage.GetBytes(“jpeg”) to convert to byte array and then upload.

Author: John Donnelly

A professional in the automobile business.

7 thoughts on “WebImage Helper and WebMatrix”

  1. Hi, This has been really useful. Maybe its just me, but I like to keep all my data in my database.

    I’m really struggling with one thing though. For some reason files with an uppercase extension .JPG don’t display. If I rename the file as .jpg it’s fine. If anyone can offer any advice or pointers with this I’d be very grateful.



    1. Hi Ed,

      I’m with you on the database. I have read mostly that you shouldn’t put images in the database but recently I read a post (sorry no link) that advocated doing so. I noticed the same thing about uppercase file extensions but haven’t looked into it at all.



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s