Rob Bihun

ASP.NET Uploading and Resizing Images

robbihun — Sun, 11 Oct 2009 11:45:00 -0600

When working on the web whether it be a full blown CMS or a small product cart. The issue of how to upload images, and especially resize them to fit your site comes up quite a bit. C# has a useful image library that you can use to resize your images to fit your needs. This post will show you how to upload the file, manipulate it, and then save it so that it can be used where you need it.

For this post we are going to make a *very* simple image gallery. Our image gallery will only have one “default” album and display the thumbnails of all of the images. In a later post I will implement the functionality to view larger sizes of the images (using some pretty cool JQuery plugins).

The Spec:

We want to upload images and resize them to 2 different sizes, Thumbnails and the large size image. We do not want to store the images themselves in a database; we do however, want to persist the image location into the database. And finally we need a page to display all the thumbnails and link to the full size images.

Step One:

First we are going to create our data structure to hold our images and other data. In the database we are going to create a table with 4 columns.

We will be storing the image title and relative web paths to the thumbnail and the full size image here. We also need to create our directory structure where the files will actually be stored in our web root. Here we are storing our images in the "UserImages” folder and subfolders.

Step Two:

We need to create a page where we will upload our files. Right Click on your web project and add a new aspx page. You will need to add a file upload control and text boxes for all of the properties you would like to store in the database (in our case, just the Title).

    <form id="form1" runat="server">
    <div class="field">
        <asp:Label ID="ImageTitle" runat="server" AssociatedControlID="ImageTitleText">Image Title:</asp:Label>
        <asp:TextBox ID="ImageTitleText" runat="server"></asp:TextBox>
    </div>
    <div class="field">
        <asp:Label ID="ImageValue" runat="server" AssociatedControlID="ImageValueFile">Image:</asp:Label>
        <asp:FileUpload ID="ImageValueFile" runat="server" />
    </div>
    <div class="buttons">
        <asp:Button ID="Submit" runat="server" Text="Save Image" OnClick="SaveImage_Click" />
    </div>
    </form>

If you are doing this in a production environment you would want to secure this page somehow. For our purposes we are just going to leave the page unsecure. Also, notice that we only have one file upload control on the page. We don’t want to have to resize each of our images ourselves in Photoshop, or worse wait for someone else to do it. We are going to have our website do it for us.

Step Three:

Here is where we get to the meat of this post. We need to decide what size of images we want. For our purpose we want to keep the aspect ratio of the images as they are uploaded. We do not want to crop them to “all be square images.” So we are going to resize our images to have a max thumbnail size of 150 x 150 and a max large size of 500 x 500 (just in case anyone tries to upload a file straight from their digital SLR). Here is our button click event

        protected void SaveImage_Click(object sender, EventArgs e)
        {
            // First check if there is a file present.
            // Should also check that the file is an allowed type.
            if (ImageValueFile.HasFile)
            {
                // We have a file. Save the image
                if (SaveImage(ImageValueFile.PostedFile, ImageTitleText.Text))
                    Response.Write("Your Image Has Been Saved");
                else
                    Response.Write("There was an error in saving your image.");

            }

And the SaveImage function that it calls

        public bool SaveImage(HttpPostedFile image, string title)
        {
            bool result = false;
            int MaxWidth = 500;
            int MaxHeight = 500;
            int ThumbMaxWidth = 150;
            int ThumbMaxHeight = 150;

            // Ensure a unique filename
            string upFileName = new Guid().ToString() + image.FileName.Substring(image.FileName.LastIndexOf("."));

            // Should put this into a config file.
            string LargeFile = @"UserImages\Large\" + upFileName;
            string ThumbFile = @"UserImages\Thumbs\" + upFileName;

            try
            {
                System.Drawing.Image UploadedImage = System.Drawing.Image.FromStream(image.InputStream);
                System.Drawing.Image LargeImage = ImageTool.ToMaxSize(UploadedImage, MaxWidth, MaxHeight);
                System.Drawing.Image ThumbImage = ImageTool.ToMaxSize(UploadedImage, ThumbMaxWidth, ThumbMaxHeight);

                LargeImage.Save(Request.PhysicalApplicationPath + LargeFile);
                ThumbImage.Save(Request.PhysicalApplicationPath + ThumbFile);
            }
            catch (Exception ex)
            {
                return false;
            }

            GalleryDataContext db = new GalleryDataContext();

            // Save the image paths and title to the database using LINQ
            GalleryImage i = new GalleryImage();
            i.FullSize = LargeFile.Replace('\\', '/');
            i.Thumbnail = ThumbFile.Replace('\\', '/');

            i.Title = title;

            try
            {
                db.GalleryImages.InsertOnSubmit(i);
                db.SubmitChanges();
            }
            catch (Exception ex)
            {
                return false;
            }

            return result;
        }

The only real thing this function does is convert the posted file into a System.Drawing.Image and then call a utility class that will do the actual resizing ( lines 18 - 20 ). Everything after that is just a LINQ expression to insert the paths to the database. The function ImageTool.ToMaxSize is as follows:

        public static Image ToMaxSize(Image image, int maxWidth, int maxHeight)
        {
            int newWidth = 0;
            int newHeight = 0;
            int currentWidth = image.Width;
            int currentHeight = image.Height;

            if ((currentWidth / (double)maxWidth) > (currentHeight / (double)maxHeight))
            {
                newWidth = maxWidth;
                newHeight = Convert.ToInt32(currentHeight * (maxWidth / (double)currentWidth));
                if (newHeight > maxHeight)
                {
                    newWidth = Convert.ToInt32(maxWidth * (maxHeight / (double)newHeight));
                    newHeight = maxHeight;
                }
            }
            else
            {
                newWidth = Convert.ToInt32(currentWidth * (maxHeight / (double)currentHeight));
                newHeight = maxHeight;
                if (newWidth > maxWidth)
                {
                    newWidth = maxWidth;
                    newHeight = Convert.ToInt32(maxHeight * (maxWidth / (double)newWidth));
                }
            }

            Bitmap newImage = new Bitmap(newWidth, newHeight);
            newImage.SetResolution(72, 72); //web resolution;

            //create a graphics object 
            Graphics gr = Graphics.FromImage(newImage);

            //just in case it's a transparent GIF force the bg to white 
            SolidBrush sb = new SolidBrush(System.Drawing.Color.White);
            gr.FillRectangle(sb, 0, 0, newImage.Width, newImage.Height);

            //Re-draw the image to the specified height and width
            gr.DrawImage(image, 0, 0, newImage.Width, newImage.Height);

            return newImage;
        }

Here we are doing some math to see which is larger, the width or the height. It will scale the image down by the largest value to get the original smaller value “within the range” that we want. Then we create a new Bitmap object with our new width and height. Finally we use the .NET graphics library to paint our canvas white and scale our uploaded image into that newly painted canvas.

Final Step:

At this point we have the images saved to our web server and the relative paths stored in the database. Now all we need is a page to display the thumbnails. I will show this in my next post where I will also display the images using some JQuery plugins. I will post all my code at the end of the next post.

Generate a Custom Password using SQLMembership Provider

robbihun — Wed, 26 Aug 2009 12:02:37 -0600

We use SQLMembership provider a lot; however, we always add custom logic and extended fields in the database for the user (relating the login in the membership provider to our tables). Recently we had a request that the client wanted to "reset" their user's passwords and give be able to tell them their new password verbally.

To the page where they edit their users, i added some logic and a button for them to "Reset Password" which called the MembershipUser.ResetPassword() method.

This worked but it generated something like qS2xh&^23dtg as the password. They wanted this to be shorter and easier to remember (as a temporary password). This was easy, and gave me the chance to do something creative for once.

We decided to generate two random words and concatenate them for the new password. Since we are use the SQLMembershipProvider and not our own we had to override the GeneratePassword() function and place our logic in there.

First, I created a new class called ExtSQLMembershipProvider

    public class ExtMembershipProvider : System.Web.Security.SqlMembershipProvider
    {
        public ExtMembershipProvider()
            : base()
        {

        }

        public override string GeneratePassword()
        {
            AppDataContext db = new AppDataContext();

            var words = db.Words.GetRandom(2).ToArray();

            return words[0].Word + words[1].Word;
        }
    }

You will notice I'm creating a call via LINQ to get two random words from the database and returning the first and second word. That is it... well, I did have to create the GetRandom extension method, but it was trivial – here is the code for that.

    public static class Extenders
    {
        public static IEnumerable<T> GetRandom<T>(this IEnumerable<T> target, int count)
        {
            Random r = new Random();
            for (int i = 0; i < count; i++)
            {
                int position = r.Next(target.Count<T>());
                yield return target.ElementAt<T>(position);
            }
        }
    }

Bam, set up a table with a bunch of random 4 or 5 letter words and you get passwords like houseball, much easier to remember than qS2xh&^23dtg!

The only thing that needs to change in the web.config is the membership provider type needs to be set to the assembly of your extended SQLMembershipProvider. In this case we have

        <membership  defaultProvider="sqlProvider">
            <providers>
                <add name="sqlProvider" type="MyNamespace.ExtMembershipProvider" />
            </providers>
        </membership>

Easy 10 minute solution that made the client ecstatic!

TripleDES Encrypt/Decrypt Extension Methods

robbihun — Wed, 12 Aug 2009 18:43:00 -0600

Every developer has reusable utilities that they have created and perfected during their time in development. One of the most favorite ones in my arsenal is a utility to encrypt and decrypt strings using TripleDES encryption.

Instead of having to look up the System.Security.Cryptography namespace every time I need to encrypt or decrypt a string, which honestly I only use about once every few months, I have converted my "helper" class to use Extension methods. So instead of:

string val = "something";
string encrypted = RobBihun.Tools.Security.TDESEncryption.Encrypt(val);

I can have:

string val = "something";
string encrypted = val.Encrypt();

Of course, you need to import the namespace that contains the extension methods. Also, you should create your own encryption keys instead of using hard-coded defaults. Here is the full code in case you want to use it.

using System;
using System.IO;
using System.Security.Cryptography;
using System.Text;

namespace RobBihun.Tools.ExtensionMethods
{
    public static class StringExtensions
    {
        private static TripleDESCryptoServiceProvider tDesProvider = new TripleDESCryptoServiceProvider();
        private static UTF8Encoding strCoder = new UTF8Encoding();

        //encryption keys to use by default - Best practice would be to use custom keys set at runtime (not hard coded)
        private static byte[] badEncKey = { 1, 3, 77, 5, 5, 98, 7, 55, 9, 10, 3, 12, 5, 15, 15, 36, 17, 28, 19, 20, 8, 22, 88, 24 };
        private static byte[] badEncIv = { 8, 7, 6, 5, 4, 3, 2, 1 };

        public static string Encrypt(this string text)
        {
            //throw new Exception("You're an idiot");
            byte[] input = strCoder.GetBytes(text);
            byte[] output = input.Transform(tDesProvider.CreateEncryptor(badEncKey, badEncIv));
            return Convert.ToBase64String(output);
        }

        public static string Decrypt(this string text)
        {
            //throw new Exception("You're a major idiot");
            byte[] input = Convert.FromBase64String(text);
            byte[] output = input.Transform(tDesProvider.CreateDecryptor(badEncKey, badEncIv));
            return strCoder.GetString(output);
        }

        public static string Encrypt(this string text, byte[] encKey, byte[] encIv)
        {
            byte[] input = strCoder.GetBytes(text);
            byte[] output = input.Transform(tDesProvider.CreateEncryptor(encKey, encIv));
            return Convert.ToBase64String(output);
        }

        public static string Decrypt(this string text, byte[] encKey, byte[] encIv)
        {
            byte[] input = Convert.FromBase64String(text);
            byte[] output = input.Transform(tDesProvider.CreateDecryptor(encKey, encIv));
            return strCoder.GetString(output);
        }


        private static byte[] Transform(this byte[] input, ICryptoTransform CryptoTransform)
        {
            MemoryStream memStream = new MemoryStream();

            CryptoStream cryStream = new CryptoStream(memStream, CryptoTransform, CryptoStreamMode.Write);
            cryStream.Write(input, 0, input.Length);
            cryStream.FlushFinalBlock();
            memStream.Position = 0;

            byte[] result = memStream.ToArray();

            memStream.Close();
            cryStream.Close();

            return result;
        }
    }
}

Of course, if you have any comments or suggestions, please leave them below!

You can Download the Full Sample Here

I love the Coalesce operator in C#

robbihun — Tue, 11 Aug 2009 09:47:32 -0600

Recently I was given a requirement where clients can enter alternate text for particular content and even alternate text to the alternate text. They wanted it so that the default text would only show if the first and second alternate text was null.

So basically we have :

Text, varchar(max)
AlternateText1, varchar(max)
AlternateText2, varchar(max)

Try to show "AlternateText2"
If "AlternateText2" is null – show "AlternateText1"
If "AlternateText1" is null – show "Text"

So what is easier?

     
string ItemText = string.Empty;
if (string.IsNullOrEmpty(c.AlternateText2))
{
	if (string.IsNullOrEmpty(c.AlternateText1))
	{
		ItemText = c.Text;
	}
	else
	{
		ItemText = c.AlternateText1;
	}
}
else
{
	ItemText = c.AlternateText2;
}

Or.... integrating it into our LINQ Query itself?

                                       
from u in something.DefaultIfEmpty()
select new
{
	ID = c.ID,
	ItemText = c.AlternateText2 ?? c.AlternateText1 ?? c.Text ?? "Oops, no text available",
	ItemDate = c.ItemDate,
	FirstName = u.FirstName,
	LastName = u.LastName,
})

That is all, nothing special here – Maybe it is the cold medicine this morning, but I was just really thankful that I did not have to write a lot of code to fulfill a fairly simple requirement.

Explaining C# Features in LINQ

robbihun — Tue, 21 Jul 2009 11:31:00 -0600

I will go into some of the newer features of C# 3.0 specifically those that are involved with LINQ.

On July 25th and 26th the BSDA will be hosting an event called LINQ Bootcamp where presenters will go through the book “Programming Microsoft LINQ” chapter by chapter (1 – 12). It will be a fun weekend and a great chance to get your feet wet with LINQ.

If you don’t think you will be able to make it to the event I would still check out the book.

With that said let's dive right in!

Implicitly Typed Variables

These are just variables declared with the var keyword and assigned a value. Once assigned a value and the type is inferred based on the value it is set to. Once set the type of the variable cannot be changed. Basically the var keyword is another way for you to be lazy - The compiler will do all the work for you to determine what the type of that variable should be and then set it. Once it is set you cannot set it to another type.

Example:

            
    var myVariable = 1;
    myVariable = "Test"; // this will not work because you cannot convert (implicitly) a string to an int.

Object Initializers

This is another shorthand, this is a way of instantiating an object and assign values to it's properties in one step, sort of like is possible with Built-In data types (int, string, bool...)

Example:

            int indexer = 1;
            string name = "test";
            bool isActive = true;

However, before the appearence of object initializers in C# to create an instance and initialize a custom business object you would need to do something like the following (unless you created several overloaded constructors):

            Person person = new Person();
            person.Age = 32;
            person.FirstName = "John";
            person.LastName = "Doe";

Using this shortcut you can now initialize a custom object as follows:

            Person person = new Person
            {
                Age = 32,
                FirstName = "John",
                LastName = "Doe"
            };

Anonymous Types

Anonymous types are a shortcut way to create custom objects with read-only properties. The compiler will generate a type name for the anonymous type and infer the properties for that type. Since the object type is not available before compile time the use of Implicitly typed variables and Object Initializers are used here.

Example:

            var person = new 
            { 
                Age = 32, 
                FirstName = "John", 
                LastName = "Doe" 
            };

            person.Age = 53; // Cannot do this - Read-Only Property.

Extension Methods

Basically an extension method is a shorthand way of creating a wrapper method. When compiled the extension method is actually called as if it was a wrapper method. Extension methods musts be defined as static, their first parameter must be declared with the this modifier and defines the object type that the method applies to.

Example:

namespace LinqBootcamp
{
    public static class IntExtensions
    {
        public static int Add(this int source, int toAdd)
        {
            return source + toAdd;
        }
    }
}

Once you have the extension method - you will need to import the namespace containing your extension and then you can use it as follows. In this case the “Add” method only applies to integers because the first parameter in the extension method is an integer.

            int test = 5;
            int a, b;

            a = test.Add(5); // a Equals 10
            b = (10).Add(10); // b Equals 20

ASP.NET 301 Redirect In Master Pages

robbihun — Thu, 18 Jun 2009 11:24:00 -0600

Today I was asked if we could set up a 301 Redirect for all non “www” request. For example if someone requested http://robbihun.com/page/about-me.aspx it would automatically do a 301 (permanent) redirect to http://www.robbihun.com/page/about-me.aspx thus making all existing links (and SEO links) work without issue.

Basically all you have to do is check the requested url, check for the existance of the www. and if it is not present, set the HTTP Headers to do a 301 redirect to the same page to the www request.

I added the following to the master page – its not my favorite code ever, but it was quick to write and implement… and most importantly, works.

    protected void Page_Load(object sender, EventArgs e)
    {
        string requestPath = GetApplicationPath().ToLowerInvariant();
        string redirectPath = "~";

        if (!requestPath.Contains("www."))
        {
            if (requestPath.Contains("http://"))
            {
                redirectPath = reqPath.Substring(reqPath.IndexOf('/', 6));
                Response.Status = "301 Moved Permanently";
                Response.AddHeader("Location", "http://www.domain.com" + redirectPath);
            }
            else
            {
                redirectPath = requestPath.Substring(reqPath.IndexOf('/'));
                Response.Status = "301 Moved Permanently";
                Response.AddHeader("Location", "http://www.domain.com" + redirectPath);
            }
        }
    }
    public string GetApplicationPath()
    {
        string applicationPath = "";

        if (this.Page.Request.Url != null)
            applicationPath = this.Page.Request.Url.AbsoluteUri;
        return applicationPath;
    }

Manipulating POST Data with Fiddler

robbihun — Mon, 08 Jun 2009 15:53:00 -0600

I like it when a new programming challenge crosses my mind. This is something i've never done before and it was a fun, quick challenge.

It all started with a simple twitter post that said

So who's writing the scipt to automatically put 
 #squarespace into every tweet for the next 30 days?

Since I use blu as my twitter client of choice (for now), my mind went immediately to how to manipulate the post to the server. I pulled up fiddler, a web debugging proxy to view and minipulate request and response data.

I made a post via blu while fiddler was running and looked for the request data.

I then checked the raw post to see how it was posting it to the server - in this case it was a simple HTTP POST. NOTE: this example image is after my modification.

A little poking around and I found that you could manipulate the body and then send the manipulated version. Even programatically

I opened up my CustomRules.js by going to Rules -> Customize Rules and modified the OnbeforeRequest method and added:

		// intercept blu twitter posts and append data.
		if (oSession.HTTPMethodIs("POST") && (oSession.HostnameIs("twitter.com") || oSession.HostnameIs("www.twitter.com"))){
			
			var oBody = System.Text.Encoding.UTF8.GetString(oSession.requestBodyBytes);
			
			oBody = oBody.replace("&source", Uri.EscapeDataString( " #squarespace") + "&source");
			
			oSession.utilSetRequestBody(oBody);
		}

Basically, i'm being really cheap here and doing a simple replace.

Line 4: Capturing the body
Line 6: Replacing &source (which is consistant) with a URI Properly Escaped string containing " #squarespace" and then the original &source parameter.
Line 8: Replacing the original body with the manipulated body.

Please Note, I know I am not checking the length of the string to make sure i'm within 140 characters; however, I don't care to use this, I just wanted to know if I could do it. This could easily be extended to check the length and only append if there is room. Let me know what you think via twitter or the comments below - or post any enhancements you have to this little snippet!

JQuery Validation with ASP.NET MasterPages

robbihun — Tue, 19 May 2009 15:36:21 -0600

I love using the jquery validation plugin in my .NET projects; however, there are some things to keep in mind when using it – especially when used in conjunction with master pages.

What is that field ID?

We all know that master pages and content pages generate specific IDs for the form elements to ensure a truly unique ID Value. When using jQuery validate, you may be tempted to call the fields client id value from .NET as shown below.

$("#aspnetForm").validate({
	rules: {
		<%=txtName.ClientID%>: {
			required: true
		}
	}
	messages: {
		<%=txtName.ClientID%>: "Please enter your name."
	}
});

Trying to run this example will not work, that is because the validate plugin uses the "name” field of form elements to run it’s validation. Rewriting the javascript to use UniqueID instead would work.

$("#aspnetForm").validate({
	rules: {
		<%=txtName.UniqueID%>: {
			required: true
		}
	}
	messages: {
		<%=txtName.UniqueID%>: "Please enter your name."
	}
});

My favorite JQuery Plugins to use with ASP.NET

robbihun — Tue, 19 May 2009 15:29:00 -0600

If you ran across this, you are probably familiar with JQuery and are more than likely a Microsoft .NET Developer. Below you will find some of my favorite and most useful plugins that are easy to use / implement in an ASP.NET site. Note these plugins are not designed specifically for use with .NET they are just the ones I find extremely useful.

Please leave any comments 0n jquery plugins that you find useful!

JQuery UI

Okay, so it is not exactly a plugin, more a set of plugins; however, I find many useful things in the UI library. Specifically Tabs, Sortable, and DatePicker are the ones i use the most. Date picker is clean and functional – not to mention it is easier to implement than the ASP.NET AJAX DatePicker.

Website: http://jqueryui.com

jTemplates

This one is very useful if you are making AJAX calls to retrieve tables of data (see my post on retrieving data from .NET Web Services). Instead of generating your html in your javascript where it is hard to read and definitely hard to update and maintain you can generate a simple HTML template to format your JSON data. For more details and examples using jTemplates check out their plugin page.

Website: http://plugins.jquery.com/project/jTemplates

Validation

You should always perform validation at the server level; however, it does wonders to be able to tell a user of your site that they did not fill out a form properly without doing a postback. Yes, I know you can use asp validators such as requiredfieldvalidator but I feel that every time I take that route, I end up writing a ton of markup just to make sure a field is not empty. This is where the jQuery validation plugin comes into play it has features to check for dates, credit cards, emails and more! It even makes it really easy to attach your own validation. There are some tips and tricks you should know about when using validation with ASP.NET especially in master pages.

Website: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Masked Input

This is a simple yet very useful plugin. Ever want to limit a textbox to numbers only or specify a format for the input? Well masked input makes it easy check out their site for demos.

Website: http://digitalbush.com/projects/masked-input-plugin/

QuickSearch

This plugin allows you to search text in a DOM element such as an ordered/unordered list or a table. This is one I haven't played with too much. I’m not sure how efficient it is with different sizes of datasets, though I suspect it gets slower with large amounts of data. To use it you just attach it to a table or list element and it will filter your data as you type.

Website: http://rikrikrik.com/jquery/quicksearch/

Manipulating and Saving Images Locally from a Remote Server

robbihun — Wed, 15 Apr 2009 14:46:00 -0600

It has come up a few times. Say you want to be able to allow someone to edit content using a rich text editor and allow them to upload images. Well, often you will find that they are linking images from other servers and the images are not formatted or sized appropriately for your application.

Here is a working example of a simple call to get an image from a remote server using a WebRequest, Manipulating the image and saving it to your server. Be warned that legal issues may arise if you do not have rights to use the image on your site.

For this example, I am using a picture of my dog found at my main site.

To keep this example simple, I am not manipulating or resizing the image. This would be easy to extend to use with a rich text editor. Enjoy!

    protected void Page_Load(object sender, EventArgs e)
    {
        string url = "http://www.robbihun.com/images/albums/fs_128664251554700000eau.jpg";
        System.Drawing.Image img = null;

        try
        {
            img = GetImageByURL(url);
            if (img != null)
            {
                //resize the image
                
                //save it to the filesystem.
                string filename = "Beau" + url.Substring(url.LastIndexOf("."));
                img.Save(Server.MapPath("~\\images\\" + filename));
            }
        }
        catch
        {
            lblErrorMessage.Text = "There was an error retrieving your file.";
        }
    }
    private static System.Drawing.Image GetImageByURL(string url)
    {
        WebResponse response = null;
        Stream serverStream = null;
        System.Drawing.Image result = null;

        try
        {
            WebRequest request = WebRequest.Create(url);
            if (request != null)
            {
                response = request.GetResponse();
                if (response != null)
                {
                    serverStream = response.GetResponseStream();
                    return System.Drawing.Image.FromStream(serverStream);
                }
            }
        }
        catch (Exception ex)
        {
            throw;
        }
        finally
        {
            if (response != null) response.Close();
            if (serverStream != null) serverStream.Close();
        }
        return result;
    }