ASP.NET 2.0 Instant Results

			Greeting Cards
	Control Name	Control Type	Purpose
	FileUpload1	FileUpload	Allows a user to select a
			local image.
	btnUpload	Button	Uploads the selected image
			to the server.
	RequiredFieldValidator1	RequiredFieldValidator	Checks whether a file has
			been selected when the
			Upload button is clicked.
	litFinishButtonText	Literal	A placeholder in the
			instructive text that is
			updated with the same text
			the Finish button has.
	imgUploaded	Image	Displays the image that the
			user uploaded.
	btnNewImage	Button	Allows a user to select a
			new image and ignore the
			previously uploaded file.
	btnFinish	Button	Moves the user to the next
			step of the Greeting Card
			application.

You saw earlier that the control has a FinishButtonText property that determines the text on

the Finish button. In the Page_Load event of the user control, this text is also applied to the Literal litFinishButtonText to synchronize the user instructions (click Next to continue) with the button’s text.

When a file has been selected and the Upload button has been clicked, the code in btnUpload_Click fires. This method is responsible for handling the uploaded file and displaying an error message in case of an exception. The method consists of two parts; the first half of the code uploads the file and saves it to disk. The other half resizes the image to the maximum dimensions specified by the MaxImageHeight and MaxImageWidth in the AppConfiguration class. Both of these parts are now discussed.

Uploading Files

The following code snippet shows the code that uploads and saves the file:

myUploadHandler = New Toolkit.UploadHandler() myUploadHandler.GenerateUniqueFileName = True myUploadHandler.AllowedExtensions = “^.jpg|.gif|.png|.jpeg$” myUploadHandler.VirtualSavePath = AppConfiguration.TempImagesFolder Try

myUploadHandler.UploadFile(FileUpload1) Catch aex As ArgumentException

Select Case aex.ParamName.ToLower() Case “extension”

lblIllegalExtension.Visible = True Case “filename”

367

Chapter 11

lblFileName.Visible = True Case “myfileupload”

lblNoFile.Visible = True End Select

Catch Ex As Exception lblErrorMessageUnknownError.Visible = False

End Try

The first thing this code does is create an instance of the UploadHandler class. Notice how the class name is prefixed with Toolkit — the namespace that the UploadHandler class lives in. As you recall from earlier in this chapter, this class is responsible for saving an uploaded file to disk. Next, three properties are set on the UploadHandler object. The first dictates that the uploaded file should get a unique filename in the form of a GUID. This ensures that the uploaded file isn’t accidentally overwritten by another file with the same name. Then the AllowedExtensions property is set. This property can contain a regular expression that dictates the allowed extensions for the uploaded file. In the preceding example, only JPG and GIF files are allowed. The final property determines the path where the uploaded images are saved, which is retrieved from the AppConfiguration class again.

Next, UploadFile is called, which gets a reference to the FileUpload control defined in the markup of the SelectImage control. The UploadFile method throws ArgumentException objects when one or more of the criteria aren’t met, so the code in the Catch block handles these errors and displays a label with an error message that describes the problem. The UploadFile method is the workhorse of the UploadHandler class, because it carries out a number of checks, builds up the path and filename where the file must be saved, and finally saves the uploaded file to disk. It’s a bit too much code to repeat here completely, but the following code block shows the first part of the method that determines the filename, extension, and the path where the uploaded file is saved:

If myFileUpload.HasFile Then

If _GenerateUniqueFileName Then _FileName = Guid.NewGuid().ToString()

Else

If _FileName IsNot String.Empty Then

_FileName = Path.GetFileNameWithoutExtension(myFileUpload.FileName) End If

End If

_Extension = System.IO.Path.GetExtension(myFileUpload.PostedFile.FileName)

If _VirtualSavePath = String.Empty Then

Throw New ArgumentException(“Cannot save the file without a “ & _

“VirtualSavePath.”, “VirtualSavePath”)

End If

If _GenerateDateFolder Then

_VirtualSavePath &= DateTime.Now.Year.ToString() & _

“/” & DateTime.Now.Month.ToString().PadLeft(2, “0”c)

End If

‘Other checks go here

‘File is saved here

End If

368

Greeting Cards

It starts off with checking whether a unique ID must be generated for the uploaded filename. The calling code set this property to True, so in the Greeting Card example the code in the first If block runs and then _FileName is filled with a GUID. In situations where no external filename has been set and the class doesn’t need to create a unique filename, the filename is retrieved from the file the user has uploaded. Then the extension is retrieved from the uploaded filename. The last part of this code block builds up the virtual path to the upload folder. When no folder has been specified, the code throws an exception and ends. Otherwise, the path is extended with the current year and month as separate folders when _GenerateDateFolder is True. This creates a path like 2006\03 under the _VirtualSavePath folder. This can be useful to segment the uploaded files by year and month.

The UploadFile method repeats similar checks to see if the image can be overwritten and if the extension of the file is valid. It does the latter with the private function IsExtensionAllowed, which uses a regular expression to validate the extension:

Private Function IsExtensionAllowed() As Boolean

Dim tempResult As Boolean = True

If _AllowedExtensions IsNot String.Empty Then

Try

tempResult = Regex.IsMatch(_Extension.ToLower, _AllowedExtensions, _

RegexOptions.IgnoreCase)

Catch

tempResult = False End Try

End If

Return tempResult End Function

Only when the AllowedExtensions property has been set does the code validate the extension. It uses the Regex.IsMatch method to check whether the uploaded file matches the extension pattern stored in _AllowedExtensions.

The remainder of the UploadFile method (not shown here) creates the requested folder and finally saves the file using the SaveAs method of the ASP.NET FileUpload control. Because these operations can result in exceptions, the code is wrapped in a Try Catch block. In case an exception occurs, it’s caught and handled by the code in the SelectImage control that you saw earlier.

Once the file has been uploaded and saved successfully, the second half of the code in btnUpload_ Click inside the SelectImage control fires. This code resizes the image to the maximum size defined in the Web.confg file.

Resizing Images

Because the Toolkit shields you from the complexity of the code to resize an image, the code in the SelectImage control is really simple:

FileName = Path.Combine(myUploadHandler.VirtualSavePath, _ myUploadHandler.FileName) & myUploadHandler.Extension

Toolkit.Imaging.ResizeImage(Server.MapPath(FileName), _ AppConfiguration.MaxImageWidth, AppConfiguration.MaxImageHeight)

imgUploaded.ImageUrl = FileName plcUpload.Visible = False plcImage.Visible = True

369

Chapter 11

The first line of the code block builds up the full filename by combining the path, the filename, and the file extension. The second line calls the ResizeImage method of the Imaging class in the Toolkit namespace. This overloaded version of ResizeImage expects a physical path to the image (that’s why Server.MapPath is used) and the maximum width and height of the image. After the image has been resized successfully, the last few lines update the Image control with the new image and switch the visibility of the plcUpload and plcImage placeholder controls. This effectively displays the uploaded and resized image on the page, and hides the FileUpload control.

To understand how the ResizeImage method works, you need to open the Imaging.vb file from the Toolkit folder and locate the method with the following signature:

Public Shared Sub ResizeImage(ByVal fileNameIn As String, _

ByVal maxWidth As Integer, ByVal maxHeight As Integer)

This method does nothing more than call another overload that has almost the same signature but accepts additional fileNameOut and ImageFormat parameters. If you locate that method (to navigate to it, right-click the method’s name and choose Go To Definition), you’ll find the following code:

Public Shared Sub ResizeImage(ByVal fileNameIn As String, _

ByVal fileNameOut As String, ByVal maxWidth As Integer, _

ByVal maxHeight As Integer, ByVal theImageFormat As ImageFormat)

Dim originalSize As Size = GetImageSize(fileNameIn)

Dim newSize As Size = New Size(0, 0)

Dim resizeFactor As Decimal = System.Math.Max( _

Convert.ToDecimal(Decimal.Divide(originalSize.Height, maxWidth)), _

Convert.ToDecimal(Decimal.Divide(originalSize.Width, maxWidth)))

newSize.Height = Convert.ToInt32(originalSize.Height / resizeFactor) newSize.Width = Convert.ToInt32(originalSize.Width / resizeFactor)

ResizeImage(fileNameIn, fileNameOut, newSize, theImageFormat)

End Sub

The first thing you may notice is that this method doesn’t actually resize the image; all it does is calculate the new dimensions of the image. First it gets the dimensions of the original image by calling the helper method GetImageSize. With these dimensions, the resizeFactor is calculated. This is done by taking the maximum value of the required resize factor for the height and for the width. To understand how this works, consider the following example. Imagine you upload a file that’s 1000 pixels wide and 600 pixels high. Also imagine that the maximum dimensions for the image in the Web.config file have been set to 640×480. With these numbers, the factor by which this image should be resized is 1.5625 (1000 divided by 640) for the width and 1.25 (600 divided by 480) for the height. The highest value of these two factors is 1.562, which means the image should be resized by that factor. To calculate the new dimensions of the image (stored in the variable newSize) both the height and the width are divided by resizeFactor. In the end, the newSize will have a width of 640 and a height of 384 pixels.

Once the dimensions are known, the code calls yet another overloaded version of ResizeImage and passes it the source and target filenames, the newSize variable, and an image type. This version of the ResizeImage does all the hard work by resizing the image:

370

Greeting Cards

Public Shared Sub ResizeImage(ByVal fileNameIn As String, _

ByVal fileNameOut As String, ByVal theSize As Size, _

ByVal theImageFormat As ImageFormat)

Dim mySourceBitmap As Bitmap = Nothing

Dim myTargetBitmap As Bitmap = Nothing

Dim myGraphics As Graphics = Nothing

Try

mySourceBitmap = New Bitmap(fileNameIn)

Dim newWidth As Integer = theSize.Width

Dim newHeight As Integer = theSize.Height

myTargetBitmap = New Bitmap(newWidth, newHeight)

myGraphics = Graphics.FromImage(myTargetBitmap)

myGraphics.InterpolationMode = _ System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic

myGraphics.DrawImage(mySourceBitmap, New Rectangle(0, 0, newWidth, newHeight)) mySourceBitmap.Dispose()

myTargetBitmap.Save(fileNameOut, theImageFormat) Catch

Throw

Finally

‘ Clean up objects. Not shown here. End Try

End Sub

After the variable declaration, the code creates a new bitmap object based on the source image. Then a new bitmap called myTargetBitmap is created, which gets the dimensions of the Size object that was passed to this method. On this target bitmap the resized version of the original image will be drawn. Then a new Graphics object is created. You can see the Graphics object as a virtual canvas and a virtual painter at the same time. The new Graphics object is created with the FromImage method and is passed the new and empty bitmap. This bitmap serves as the canvas to paint on. Then the InterpolationMode of the Graphics object is set. This enumeration defines the algorithm that is used when images are scaled or rotated. This enumeration has quite a few members, each resulting in a different image quality. In the preceding code, HighQualityBicubic is chosen because it ensures the best quality of the image.

Then DrawImage is called to paint the original image (stored in mySourceBitmap) at the specified location and size on the target bitmap. For this location and size it expects a Rectangle object, which is created on the fly in the method call. The Top and Left of the rectangle are set to 0, and the Height and the Width come from the Size object passed to the ResizeImage method. When DrawImage draws the bitmap from mySourceBitmap onto its internal bitmap object (myTargetBitmap) it resizes and positions the source bitmap. In this code example, it places the new bitmap at 0, 0 (the upper-left corner) but when you have other drawing needs you can choose a different location. For example, when you want to draw a border around an image, you could specify 10, 10 as the upper-left location. If you also specify the target bitmap to be 20 pixels higher and wider than the original, you get a nice border of 10 pixels on all four sides of the image.

371

Chapter 11

The final step is to save the new bitmap using its Save method. However, before that is done, the original bitmap is disposed first. When .NET creates a new bitmap based on a file location, it holds on a lock to that file. So, until you release that lock by calling Dispose, the original file cannot be overwritten. To ensure that calling code can resize an image that is saved under the original name (effectively overwriting the original) the source bitmap is disposed before Save is called.

The Finally block eventually cleans up any object that has been created in the Try block.

Back in the SelectImage.ascx control, there is one event you need to look at; the Click event for the Finalize button:

Protected Sub btnFinish_Click(ByVal sender As Object, _

ByVal e As System.EventArgs) Handles btnFinish.Click

RaiseEvent ImageFinalized(Me, New FileHandlingEventArgs(FileName))

End Sub

This code raises the event called ImageFinalized and passes the FileName of the image that has just been uploaded and resized. As soon as the event is raised, the code in Default.aspx catches it with the following code:

Protected Sub SelectImage1_ImageFinalized(ByVal sender As Object, _

ByVal e As FileHandlingEventArgs) Handles SelectImage1.ImageFinalized MultiView1.ActiveViewIndex = 2

RotateFlipImage1.FinishButtonText = “Next”

RotateFlipImage1.FileName = e.FileName

End Sub

This code sets up the next user control called RotateFlipImage1, which allows a user to rotate and flip an image. It sets the FinishButtonText of that control to Next, and it sets the FileName property to the filename retrieved from the e argument. The FileName property of the RotateFlipImage1 is the source file this control will work with.

Rotating and Flipping Images

When the FileName property is set by the host page, the RotateFlipImage control (called RotateFlipImage.ascx in the Controls folder) calls a private method called InitializeControl (in bold text in the following code), but only the very first time this property is set. This is done to avoid calling InitializeControl more than once:

Public Property FileName() As String ‘ Get accessor goes here (not shown)

If ViewState(“FileName”) Is Nothing Then

ViewState(“FileName”) = value

InitializeControl()

Else

ViewState(“FileName”) = value

End If

End Property

372

Greeting Cards

InitializeControl in turn calls a helper method called GetRotateTypes in the Imaging class of the Toolkit to get a string array of all the available rotation types:

Public Shared Function GetRotateTypes() As String()

Dim tempResult As String() = [Enum].GetNames(GetType(RotateFlipType))

Array.Sort(tempResult)

Return (tempResult)

End Function

It does this by calling GetNames on the Enum class and passing it the type of RotateFlipType, which is defined in the .NET System.Drawing namespace. The RotateFlipType enumeration defines rotating and flip types like Rotate180FlipNone, which rotates an image 180 degrees; RotateNoneFlipX, which mirrors the image horizontally; and so on. The array that GetNames returns is sorted and then used as the DataSource for the DropDownList control called lstRotateFlipTypes. When the user chooses one of the types from the drop-down list and clicks the Rotate button, the code in the code-behind fires:

Dim myRotateFlipType As RotateFlipType = [Enum].Parse(GetType(RotateFlipType), _ lstRotateFlipTypes.SelectedValue)

Imaging.RotateImage(Server.MapPath(FileName), Server.MapPath(TempFileName), _ myRotateFlipType)

HasBeenRotated = True plcRotate.Visible = False btnUndo.Visible = True UpdateImageControl(TempFileName)

This code first parses the chosen RotateFlipType from the SelectedValue of the DropDownList. It then uses Server.MapPath to translate the virtual path of the FileName property (retrieved from the SelectImage control and set by Default.aspx) and of the TempFileName property, which is generated by the code automatically:

Private ReadOnly Property TempFileName() As String

Get

If ViewState(“TempFileName”) Is Nothing Then

ViewState(“TempFileName”) = AppConfiguration.TempImagesFolder & “/” & _

Guid.NewGuid.ToString() & “.jpg”

End If

Return ViewState(“TempFileName”).ToString()

End Get

End Property

Only the very first time this property is accessed, a filename is built up by combining the temp path for the images, a GUID, and the extension .jpg. On subsequent calls to this property, its value is retrieved from ViewState. This ensures that the control has the same unique filename available during the control’s lifetime.

When the paths have been translated to physical paths correctly, they are passed into RotateImage, which is defined in the Imaging class in the Toolkit and looks like this:

Using myBitmap As New Bitmap(fileNameIn) myBitmap.RotateFlip(theRotateFlipType)

myBitmap.Save(fileNameOut, ImageFormat.Jpeg) End Using

373

Chapter 11

This method simply calls the RotateFlip method of the Bitmap class and passes it the specified RotateFlipType. It then calls Save on the same object to save the changes to disk.

Once the user is done with rotating and flipping the image, she can click the Finish button. When that button is clicked, the control updates the FileName property with the value from TempFileName (that now holds the rotated image) but only when the image has actually been rotated. Otherwise, the

FileName property is left as is and passed to the event handler in the calling code. The final line of code in the method raises the event ImageFinalized:

If HasBeenRotated Then

FileName = TempFileName

End If

RaiseEvent ImageFinalized(Me, New FileHandlingEventArgs(FileName))

The host page has an event handler for this event. Inside this handler, called RotateFlipImage1_ImageFinalized, the host page now passes the filename up from the RotateFlip control to the CropImage control, which is discussed next.

Cropping Images

Recall from the introduction of this chapter that the cropping page displays a rectangle that the user can move around and resize. When the correct portion of the image is selected, the image is cropped with the click of a button. The rectangle that is drawn on top of the image is a visual cue to the user. When the actual crop operation is performed, the image is cropped to the area that is visible inside the selection rectangle.

The entire cropping is handled by the CropImage control, saved as CropImage.ascx in the Controls folder. The left side of the control displays the image that has been set by the previous RotateFlip control. At the right side, you see a drop-down list that allows you to change the color of the selection area. It’s useful to change the color when you have uploaded a dark image, which makes the default color

of black hard to spot. The items in the drop-down list are set in the InitializeControl method that is called when the FileName property is set for the first time, similar to the code you saw for the RotateFlip control. Just as with the RotateFlip types, the Imaging class has a useful method that returns an array of Color objects:

Public Shared Function GetColors(ByVal includeSystemColors As Boolean) As Color() Dim tempColors As KnownColor() = _

CType([Enum].GetValues(GetType(KnownColor)), KnownColor()) Dim colors As New ArrayList

For loopCount As Integer = 0 To tempColors.Length - 1

If (Not Color.FromKnownColor(tempColors(loopCount)).IsSystemColor _

Or includeSystemColors) And Not _ Color.FromKnownColor(tempColors(loopCount)).Name = “Transparent” Then

colors.Add(Color.FromKnownColor(tempColors(loopCount))) End If

Next

Return CType(colors.ToArray(GetType(Color)), Color()) End Function

374

Greeting Cards

This method uses Enum.GetValues to get an array of KnownColor objects. This array also includes system colors like ActiveBorder and ButtonFace. Because these colors are defined by the system settings of the server and the end user has no way to find out what color they represent, they are removed

from the list when the Boolean parameter includeSystemColors is False. This is done by looping though the array with colors, and adding each valid color to a new ArrayList. At the end of the method, the ArrayList is converted to an array of Color objects and returned to the calling code where it is used as the DataSource for the color drop-down.

Below the color drop-down, you see two sets with four button controls each. The first set, displayed in Figure 11-11, is used to change the location of the cropping area on the image.

Figure 11-11

With the pixels drop-down control you can determine how many pixels the selection area is moved when one of the buttons is clicked. When you click one of the buttons, the code in the code-behind for the control recalculates the location of the selection area and then draws a new rectangle on top of the image. This is done with the following code, which is fired when you click the upward-facing arrow:

Protected Sub btnLocationUp_Click(ByVal sender As Object, _

ByVal e As System.EventArgs) Handles btnLocationUp.Click Top -= MoveIncrease

If Top < 0 Then Top = 0

End If DrawRectangle()

End Sub

The MoveIncrease property is a simple wrapper around the SelectedValue of the pixel drop-down list you saw in Figure 11-11. The code then subtracts this increase size from the Top location of the control. This property is stored in ViewState, just like its counterparts Left, Width, and Height. The code also checks if the Top property doesn’t exceed the image’s boundaries. In this case, when Top is less than 0, it is set to zero, so the rectangle is displayed at the very top of the image.

The code for the three other buttons for navigation work pretty much the same way in that they increase or decrease the values for the Top or Left properties.

At the end of the code, DrawRectangle is called. This method is discussed in full detail after the Resize buttons for the selection area have been discussed.

Figure 11-12 displays the four buttons that are used to control the size of the selection area. The code in the code-behind is almost identical to that for the navigation buttons, but the size buttons operate on Width and Height, rather than on the Top and Left properties.

375

Chapter 11

Figure 11-12

Each of the eight event handlers for the navigation and size buttons calls DrawRectangle. This method creates a new rectangle based on the Top, Left, Height, and Width properties and creates a new

color based on the SelectedValue of the lstPenColor control. These values are then passed to DrawRectangle in the Imaging class of the Toolkit, which draws a rectangle on top of the image:

Public Shared Sub DrawRectangle(ByVal fileNameIn As String, _

ByVal fileNameOut As String, ByVal theRectangle As Rectangle, _ ByVal myColor As Color)

Dim myGraphics As Graphics = Nothing

Dim myBitmap As Bitmap = Nothing

Try

myBitmap = new Bitmap(fileNameIn) myGraphics = Graphics.FromImage(myBitmap)

Dim myPen As New Pen(myColor, 1) myGraphics.SmoothingMode = Drawing2D.SmoothingMode.None myGraphics.DrawRectangle(myPen, theRectangle) myPen.Dispose()

myBitmap.Save(fileNameOut, ImageFormat.Jpeg)

Catch ex As Exception Throw

Finally

If myBitmap IsNot Nothing Then myBitmap.Dispose()

End If

If myGraphics IsNot Nothing Then myGraphics.Dispose()

End If End Try

End Sub

Similar to the resize code you saw earlier, this code creates a new Bitmap and a new Graphics instance. This Graphics instance stores the Bitmap as its drawing canvas. Then .NET’s DrawRectangle draws the actual rectangle on top of the image. The size and color of the rectangle are determined by the Pen object that is passed to DrawRectangle. To keep the rectangle from getting blurred, the SmoothingMode of the Graphics object is set to SmoothingMode.None, which ensures that the line isn’t anti-aliased. After the rectangle has been drawn, the Pen object is disposed and the image is saved.

376