Uploading an Image and Creating a Thumbnail in ASP.NET

There are literally thousands of facets to the .NET Framework, and writing them down functions as a way to learn, memorize or work out the details. This is especially useful for things you use infrequently, such as thumbnail images. I wrote an application several years ago to manage label images, but when I sat down to try to upload an image, I discovered that I had forgotten how to create a thumbnail image—a subject that makes a useful article topic.

This article shows you how to use an <input> control to browse and upload images, and then convert those images to thumbnail versions for display on the web site. The code is straightforward without a lot of sanity checking, as is the ASPX, and works fine for example purposes, but for a production application you'll want to add validation and error checking (but that's another article).

Uploading Files with the <input> Element

The <input> HTML element is a versatile HTML control. Based on the value you supply for the element's type attribute, the <input> element can function (and display) as a general-purpose button, a radio, reset, or submit button, a checkbox, a file uploader, a hidden control, an image, a password field, or a text control. For the file uploader, set the <input> element's type attribute to file, and the <input> control displays a textbox and a button labeled "Browse." While you can code this manually, the easiest way to display a file uploader is to select the Input (File) item from the HTML tab of Visual Studio's Toolbox.

Figure 1. Design-Time View:
From this design-time view, you can see how the sample page uses the table to lay out the other HTML elements.

The sample ASPX page contains this type of <input> element, as well as a label, a button to submit a selected image file, and an image element. The server creates a thumbnail of that image and returns it to the browser, which displays it in an <img> element on the same page. An HTML table handles the control layout (see Listing 1). At design-time, the page looks like Figure 1.

HTML tables are pretty versatile and easy to use. If you want a simple spreadsheet-like table then use <tr> elements to add rows and <td> elements to add cells. If you want a single cell to span multiple rows then set the <td> element's rowspan attribute, or to span multiple columns, set its colspan attribute.

The only other interesting aspect of the HTML in Listing 1 is that the <img> control (in column 2 in Figure 1) has an ID attribute, and its runat attribute is set to server. Setting the runat attribute lets you manipulate the <img> control in the server-side code behind. You'll use this to display the created thumbnail image.

Saving the Uploaded Image

When an <input> control has its type attribute set to file, a user can click the Browse button to select a file. After selecting a file, when the user submits the page the <input> control will have a populated PostedFile property, which is a class that will contain the file's contents and other file information, such as its file name. To be specific, PostedFile is an instance of the HttpPostedFile class.

To use the GUI, a user clicks the Browse button, selects a file, and then clicks the Upload button. On the server, you can save the posted file by calling the <input> control's PostedFile.SaveAs method, passing the path and file name where you want to save the file. The following code shows just how easy this part of the process is:

Private Const imagePath As String = "~/Images/"
Private Sub SaveUploadedFile(ByVal filename As String)
  File1.PostedFile.SaveAs(MapPath(imagePath) + filename)
End Sub

In the preceding code, File1 is the ID of the <input> control. (The <input> control has the runat="server" attribute set, so even though it's an HTML control, it is available on the server side too.)

Creating and Display the Thumbnail

The sample program uses a Button control to submit the default form containing the <input> element. The <input> element has the posted file. The complete code, shown in Listing 2, performs four steps:

  1. Extract the file name from the posted file path
  2. Save the uploaded file to a pre-determined server path
  3. Save a thumbnail copy of the image
  4. Set the <img> element's src attribute to the thumbnail's location

When the user submits the file, File1.PostedFile.FileName contains the client's local path (the location of the file on the user's machine). You will want to extract the filename without the path, which you can do with the System.IO.Path class's GetFileName method.

The SaveUploadedFile method shown earlier uses the PostedFile.SaveAs method to save the file. Note that it uses the MapPath method, which maps a server-side relative path to its physical path. It appends the file name to that path, which creates a complete pathname where it saves the uploaded file. (You could also save the file to a database or display the file contents on the web page.)

The next step is to create the thumbnail image. The SaveThumbnail method creates a thumbnail copy of the image.

Private Sub SaveThumbnail(ByVal filename As String)
   Dim image As Image = image.FromStream( _
   Dim thumbnail As Image = image.GetThumbnailImage( _
      100, 100, AddressOf Callback, IntPtr.Zero)
End Sub
Private Function GetThumbnailPath( _
   ByVal filename As String) As String
   Return "~/Images/" + _
      String.Format(thumbnailMask, filename)
End Function

The SaveThumbnail method creates an in-memory System.Drawing.Image instance from the HttpPostedFile's InputStream property by passing the input stream to the Image.FromStream method. Next, it creates a thumbnail copy of the image by calling the Image's GetThumbnailImage method. GetThumbnailImage has some odd arguments, mostly because its implementation calls into unmanaged code. The first two arguments are the width and height of the thumbnail image, the third argument is an unused callback delegate, which you must provide, even though it's unused. The fourth argument is another unused relic to satisfy the native code call. The final argument must be IntPtr.Zero. (Obviously, a better thumbnail wrapper probably needs to be created.) Finally, the method saves the thumbnail in the same location as the original image, but with the prefix thumbnail_ added to the file name.

Finally, the SetPreviewImage uses the virtual path for the thumbnail and assigns it to the <img> element's src property.

Private Sub SetPreviewImage(ByVal filename As String)
   PreviewImage.Src = GetThumbnailPath(filename)
End Sub

The topic of uploading files is a bit of an oldie, but it is still a goody. Creating and showing thumbnails is a good way to let users preview numerous images, and then select a full-sized version. The GetThumbnailImage method makes a call into unmanaged native code, so it has some unused "junk" arguments that make it a little cumbersome to use—but now you have the CliffNotes.


  • why input tag rather than asp.net fileupload control ?

    Posted by danasegarane on 10/19/2009 03:28am

    Diplay Vehicle Details	Track Vehicle Page	If the selected value in the combo box is 1/5 , for every 5 point 1 point shall  be drawn in the map and vice versa

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Thanks to wide spread cloud hosting and innovations small businesses can meet and exceed the legacy systems of goliath corporations. Explore the freedom to work how you want, with a phone system that will adapt to your evolving needs and actually save you lots of expense—read Get an Enterprise Phone System without High Cost and Complexity. The article clearly illustrates: The only hardware you'll need is phone equipment for advanced voice and fax. How to join all your employees, mobile devices, …

  • Is your organization increasingly concerned about being the victim of a targeted attack? With targeted attacks increasing in frequency and ruthlessness, companies must take steps to protect themselves. This Smart Select provides customized guidelines to advise you in how to protect your IT assets.

Most Popular Programming Stories

More for Developers

RSS Feeds

Thanks for your registration, follow us on our social networks to keep up-to-date