An ASP.NET Thumbs.db Thumbnail Viewer

• Download source code - 1.64 MB

Introduction

I keep a boat-load, I mean a serious boat-load of photos on a web server for easy access. Pretty much every photo I've taken since my 1 mega pixel CAM. Imagine that. A whole, huge mega pixel. Anyhow, having to click on each filename to see the photo is a drag and makes hunting for a certain photo very time consuming. I do use nGallery (now part of Community Server) to host some photo albums of interest. But it would be very cumbersome to manage almost 10,000 photos. Besides, I don't need a fancy web page for every single photo. The Windows Explorer thumbnail view is great (for the most part) and I wished I could have the same view in my web browser when away from home.

So the other day, while I once again found myself digging through photos one by one, I glanced upon the Thumbs.db file. It's probably hidden on most of your computers. For some reason, I had changed my folder view settings and the file caught my eye. I knew what it was and that it was created whenever I switched to Thumbnail view, but had no idea about how it worked and what exactly was in it. I did a few Google searches and found out that it's an IStorage - COM structured storage file. Only lower-level APIs can access it. .NET has no direct means of accessing it so importing COM libraries are the only way to work with it. A little more Googling led me to a .NET library that did just this - ThumbDBLib - A C# library for reading thumbs.db files. It was exactly what I was looking for. A couple hours later, I had just what I had always wanted! An Explorer-style web thumbnail viewer for all my photos... Yippee!

Due credit goes to Pete Davis for his ThumbDBLib - A C# library for reading thumbs.db files. Please have a look at Pete's site for the source code and information about how his library works. Many prop's, Pete!

The code

The following code is in the Page_Load event of thumbs.aspx. Download the sample app for the full listing. The ASPX page has a single Placeholder control of which System.Web.UI.WebControls.Image controls are added. An Image control is added for each thumbnail found in the Thumbs.db file. This causes a series of <img src...> tags to be rendered in the final HTML. The client web browser then calls back to thumbs.aspx and requests each image in the form of <img src="thumbs.aspx?thumb={filename}" ...>. The thumbnail is retrieved from Thumbs.db and returned to the client. There you have it!

Dim ThumbDb As String = Server.MapPath(".") & "\thumbs.db"
If File.Exists(ThumbDb) Then

    Dim ThumbLib As New ThumbDBLib.ThumbDB(ThumbDb)

    ' Is an individual image being requested?
    If Not Request.QueryString("thumb") Is Nothing Then

        ' Get the thumbnail byte array...
        Dim Thumb As String = Request.QueryString("thumb")
        Dim ThumbData As Byte() = ThumbLib.GetThumbData(Thumb)

        ' Send it to the client...
        Response.Clear()
        Response.ContentType = "image/" & _
           Path.GetExtension(Thumb).ToLower.Replace(".", "")
        Response.BinaryWrite(ThumbData)
        Response.Flush()
        Response.End()

    Else
        ' 1. Get the list of thumb's
        For Each thumb As String In ThumbLib.GetThumbfiles
            ' NOTE: The thumbs.db may have thumbnails of other items such as folders.
            ' The thumb is viewable (uncomment the File.Exists statement below), 
            ' but will not exist as an actual image.
            If File.Exists(Server.MapPath(".") & "\" & thumb) Then

                ' 2. Create an Image for each thumb and set properties...
                ' Could use a Literal control here if you want more 
                ' control over the html.
                Dim ThumbImage As New System.Web.UI.WebControls.Image

                ThumbImage.ImageUrl = "thumbs.aspx?thumb=" & Server.UrlEncode(thumb)

                ThumbImage.ImageAlign = ImageAlign.Top
                ThumbImage.AlternateText = thumb
                ThumbImage.BorderStyle = BorderStyle.Outset
                ThumbImage.BorderWidth = New Unit(1)
                ThumbImage.Attributes.Add("hspace", "4")
                ThumbImage.Attributes.Add("vspace", "4")
                ThumbImage.Attributes.Add("onclick", "window.location.href='" & thumb & "';")
                ThumbImage.Style.Add("cursor", "hand")

                ' 3. Add the image to the page. This renders
                '    an <img src="thumbs.aspx?thumb={filename}">
                '    for each thumbnail. When the html gets
                '    to the client, each image is requested and
                '    this page returns the image directly
                '    through the Response stream (code above.)
                plcThumbs.Controls.Add(ThumbImage)

            End If
        Next

    End If
    ThumbLib = Nothing
Else
    Response.Write("Thumbs.db Not Found!")
End If

Points of Interest (or Disinterest)

1. The above example has an obvious disadvantage. If you have your photos organized into lots of separate folders, you have to put a copy of the thumbnail viewer in each folder. A big drag. The solution is easy: an IHttpHandler or IHttpModule could handle this just fine. Only one thumbs.aspx file would exist, but requests for it would be trapped by the Handler or Module and processed for any directory.
2. Another (big) disadvantage is, the Thumbs.db file needs to be generated manually. You need to switch to Thumbnail view from within Windows Explorer. I haven't found a way to invoke the creation of Thumbs.db from code. I'm sure there is a way. If anyone knows how, please drop me an email and I'll update the article.
3. I can't figure out how to close the Thumbs.db file after it's been opened by ThumbDbLib. The file stays in use by the aspnet (or w3wp) worker process and cannot be deleted. You need to kill the worker process to free the file. Again, I'm sure there is a solution, I just haven't had the time to find it. It's probably right under my nose, too!
4. Not sure why there is white-space at the top/bottom of some thumbnails. There's probably a perfectly good reason, but it doesn't really bother me.

In addition to Pete's ThumbDbLib, some useful information can also be found in the following articles:

• COM structured storage from .NET
• MSDN - Using Structured Storage

To setup the demo project, extract the zip and create a virtual directory in IIS that points to the ThumbsDbViewer directory. It is pre-compiled and should work without Visual Studio.

I know, I know. This article leaves some unanswered questions and plenty of loose ends. I wrote it merely to demonstrate a concept. I welcome all constructive feedback and would love to know more about the things I know little. Code on...

History

• 06-05-2007: Initial creation.