October 21, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Uploading Images to a Web Site Is Harder Than You Think

  • August 22, 2005
  • By Paul Kimmel
  • Send Email »
  • More Articles »

Rendering the Uploaded Image

An easy way to render the image is to dynamically create a Web control Image and insert it somewhere in the page. You control the attributes and style in advance (or dynamically), and the URL is the same path you used to store the image. Knowing the scheme used to write the image files, you can use System.IO capabilities to re-read the image file—bypassing storing the filenames in Session information, or you could use the Session cache—and create an image for each of the files. Listing 2 shows a hypothetical image-rendering method based on the known-path technique.

Listing 2: Rendering All of the Images Stored in a Known Location

private void DrawImages()

{

  const string path = "c:\\temp";

  if( !Directory.Exists(path)) return;

  string[] files = Directory.GetFiles(path);

  for( int i=0; i<files.Length; i++)

  {

    System.Web.UI.WebControls.Image img = new System.Web.UI.WebControls.Image();

    img.ImageUrl = files[i];

    img.EnableViewState = true;

    img.CssClass = "MyClass"; //optional

    img.AlternateText = "photo " + (i+1).ToString();

    Controls.Add(img);

  }

}

In this example, the path is static. But you could use any scheme you'd like for managing images, including the ApplicationPath//SessionID/GUID technique described previously. The rest of the code simply sets the useful properties of the image. If you have a style sheet defined, set the CssClass property, and you can use <div> tags or an HTML table to manage layout. Figure 2 shows my smiling face loaded three times on the present Registration page for exactodate.com using an HTML table to manage layout.



Click here for a larger image.

Figure 2: Uploaded Images Using the HtmlInputFile Control and an HTML Table to Easily Manage Layout

Frustrations

The steps demonstrated in this article are easy, but some loose ends bug me. The first is that I didn't show how to load this image in a database using ADO.NET, but the article would be too long if I opened that can of worms. Try using the image data type and converting the image to a byte array (in SQL Server) to persist the image, but you could leave the image on the file system and simply store the path to each file. But there are more problematic issues than these.

I haven't found a way to clean up all of these images. They are necessary for display, so it's not easy to delete the files when they are stored in a database. One could delete them when the session times out, but this can happen after the user has closed the browser and doesn't seem to be a wholly reliable means of cleaning up the saved files.

It also would be nice to simply upload the image right into the page. This can be done with code like image.Save(Response.OutputStream, image.RawFormat) where image is an object like a Bitmap. Unfortunately, this is a destructive statement and replaces all of your other content. You would think it would be possible to insert the image non-destructively. You also can write the image to a .ascx control dynamically and then load the control dynamically as well, but this approach seems like even more overhead than just saving the image.

Finally, I'd like to bind an image field directly to a control without an URL—which implies saving the file to disk again—but this also seems impossible at present. The assumption seems to be that images are always files persisted to disk. One can set the text property of a TextBox right from code, so why not the value of an image?

It seems like something as fundamental as image management is based on an older static-content mode. This makes image management clunky at best.

A Call to Arms

By using the HtmlInputFile control and the HttpPostedFile property, you can upload and display user-added content relatively easily. What isn't so clear is how to store and render that content without creating external file-management problems.

This article demonstrated how to get the basic job done. Now I unabashedly am asking for your feedback to help all of us find a solution whose time has come. If you have solutions to the questions posed in the Frustrations section, send them to me, and I will try to get that data updated into this article as a set of workable, if not best, practices.

About the Author

Paul Kimmel has written several books on object-oriented programming and .NET. Check out his upcoming book UML DeMystified from McGraw-Hill/Osborne (Fall 2005). Paul is also the founder and chief architect for Software Conceptions, Inc., founded in 1990. He is available to help design and build software worldwide. You may contact him for consulting opportunities or technology questions at pkimmel@softconcepts.com.

If you are interested in joining, sponsoring a meeting, or posting a job, check out www.glugnet.org, the Web page of the Greater Lansing area Users Group for .NET.

Copyright © 2005 by Paul T. Kimmel. All Rights Reserved.





Page 2 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel