ASP 101 - Active Server Pages 101 - Web03
The Place ASP Developers Go!

Please visit our partners


Windows Technology Windows Technology
15 Seconds
4GuysFromRolla.com
ASP 101
ASP Wire
VB Forums
VB Wire
WinDrivers.com
internet.commerce internet.commerce
Partners & Affiliates














ASP 101 is an
internet.com site
ASP 101 is an internet.com site
IT
Developer
Internet News
Small Business
Personal Technology

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers

ASP 101 News Flash ASP 101 News Flash



 Top ASP 101 Stories Top ASP 101 Stories
The Top 10 ASP Links @ Microsoft.com
What is Adovbs.inc and Why Do I Need It?
An Overview of ASP.NET

QUICK TIP:
Rating the content of your web site
Show All Tips >>
ASP 101 RSS Feed ASP 101 Updates


An ASP Image Browser (and Killer!)

by John Peterson

Introduction

If you've been running your web site for more then a couple of months, you've probably noticed how quickly image files tend to accumulate. Even though we all try to give our files meaningful names, sometimes when you're looking through a directory full of image file names, it's not always easy to recall what a particular file is or what it was used for.

When that happens, I usually find myself repeatedly firing off a browser and requesting the image to see what it is. Well this little script is an Image Browser (and Killer!) that makes the process of cleaning out a directory full of images a piece of cake.

The Code

In reality the whole thing is just one big form containing a table that lists all the images in the directory in question. To do this it uses the FileSystemObject to get a list of the files and simply displays the GIF and JPEG file types.

I added one little bell or whistle (it's your choice!) in that you can toggle the display of the images on and off. When you've got a lot of files and don't want to load all the images you can leave it off, but, on the other hand, when you're not sure which files are named what, it's extremely helpful to see what you're deleting.

It's pretty simple so here's the code. Note that I didn't use Response.Write much so there are a lot of context switches between HTML and ASP. If it bothers you, it can easily be converted, but where the majority of the text inside the loop was just formatting, all the Response.Write commands were getting on my nerves.

<%@ Language=VBScript %>
<% Option Explicit %>
<%
Const ImageFilePath = "images"
Const DeleteButtonLabel = "Delete Selected Images"
Dim objFSO
Dim objFolder
Dim objFile
Dim strFileName
Dim strFileExtension
Dim blnShowImages
If Request.QueryString("ShowImages") = "" Then
    blnShowImages = False
Else
    blnShowImages = CBool(Request.QueryString("ShowImages"))
End If
If Request.Form("btnDelete") = DeleteButtonLabel Then
    Set objFSO = Server.CreateObject("Scripting.FileSystemObject")
    For Each strFileName In Request.Form("delete")
        objFSO.DeleteFile(Server.MapPath(ImageFilePath & "/" & _
            strFileName))
    Next
    Set objFSO = Nothing
End If
%>
<html>
<head>
  <title>ASP 101 Image Browser & Killer!</title>
</head>
<body>
<form action="<%= Request.ServerVariables("URL") %>" method="post">
<table border="1">
<tr>
    <th>Image Name</th>
    <th>Image <a href="<%= Request.ServerVariables("URL") %>?
        ShowImages=<%= Not blnShowImages %>">(Toggle Display)</a></th>
    <th>Delete This Image</th>
</tr>
<%
Set objFSO = Server.CreateObject("Scripting.FileSystemObject")
Set objFolder = objFSO.GetFolder(Server.MapPath(ImageFilePath))
For Each objFile In objFolder.Files
	strFileExtension = LCase(Mid(objFile.Name, _
		InStrRev(objFile.Name, ".", -1, 1) + 1))
	If strFileExtension = "gif" Or strFileExtension = "jpg" Or _
		strFileExtension = "jpeg" Then
	' Original image file identification option:
	'If objFile.Type = "GIF Image" Or _
		objFile.Type = "JPEG Image" Then
        %>
        <tr>
        <td>
            <a href="<%= ImageFilePath & "/" & objFile.Name %>">
            <%= objFile.Name %></a>
        </td>
        <%
        If blnShowImages Then
            %>
            <td>
                <img src="<%= ImageFilePath & "/" & objFile.Name %>" />
            </td>
            <%
        Else
            %>
            <td>
                <a href="<%= ImageFilePath & "/" & objFile.Name %>">
                View Image</a>
            </td>
            <%
        End If
        %>
        <td align="center">
            <input type="checkbox" name="delete"
            value="<%= objFile.Name %>" />
        </td>
        <%
    End If
Next
Set objFolder = Nothing
Set objFSO = Nothing
%>
<tr>
    <td colspan="3" align="right">
        <input type="submit" name="btnDelete"
        value="<%= DeleteButtonLabel %>">
    </td>
</tr>
</table>
</form>
</body>
</html>

Please be careful with this... it doesn't ask "Are you sure?" and it doesn't offer any undelete capability so before you click on the button make sure those check marks are in the right places!

Conclusion

ASP doesn't always have to be about building a huge scalable web site. Occasionally you can use it just to make your job easier... even if the script never gets published on the web!

Get The Code

You can download a zip file containing the code discussed in this article from here. I haven't included any sample images in order to keep the size down (and because I was too lazy to make any). Once again I just want to warn you that it is incredibly easy to do major damage and delete a lot of images relatively quickly with this script. Also note that it does not ask for confirmation so please be careful when using it and when testing make sure you're playing with spare copies of images and not your only copies.

The only problem I can envision is the NTFS permissions not allowing you to delete the files. If that happens check the settings or log in as a user with the appropriate permissions before running this script.

Code Update

I've received a number of email messages about the code in this article not working. After looking into them, I've found that the problems seem to mainly stem from two separate issues.

The first is that some people don't realize they need to set the path where the script should look for images. I've currently got it set to the images directory directly below wherever you place the script. So... if I placed the script at the root of http://www.asp101.com/ it would display images residing in http://www.asp101.com/images/. If I instead placed the script in the samples folder at http://www.asp101.com/samples/ it would then display images residing in http://www.asp101.com/samples/images/.

You can change this behavior by altering the value of the ImageFilePath constant. You can place any virtual path there and the script will resolve the appropriate physical location using Server.MapPath. You can pretty easily specify any location within your site that you prefer. For example, changing the value of the constant from "images" to "/images" will get the script to always point to the images directory directly off the root of your site. Also note that it expects the value of ImageFilePath to not include the trailing / since it adds this on its own.

The second issue is more of a real issue then an explanation. When writing the script, I simply used the file types that my machine indicated. This works great... on my machine! Come to find out, the file type description can vary based on your file associations. To get around this you can choose to show files based on their extension instead of their type. I've implemented this in the code listing above as well as the zip file so if you previously downloaded a copy of the code and have been having troubles with it you might want to download the latest version, which incorporates these changes.

Update: Fake Thumbnails

One of our readers was using the script on relatively large pics, but still wanted to see a preview of what he was deleting. He had this suggestion:

Just a minor tip:

I was searching for a code for a friend that house images for a roleplaying site. Some of these images are full sized pics, so you can imagine how toggling them to show the pics would be. By adding:

<img height='96' width='96' src="<%= ImageFilePath & "/" & objFile.Name %> " />

to your current code, it now shows a thumbnail of the original version. I'm sure you can work it better than I can, but it's something you might consider if you update it again.

Great work by the way. Far easier than the other codes I found that claimed they were the 'easiest' to use.

Dave

Thanks Dave... a handly little option. I wrote the script to manage web files which tend to be small and I've got a relatively large monitor (The old Apple 22" Cinema Display - no longer available - although the new 23" Apple HD Cinema Display is similar) so this never really occurred to me, but if you're dealing with large files it makes perfect sense. Oh and you can modify the sizes to work with whatever type of file you're working with. For instance, if you're looking at 468x60 banners then you might not want 96x96, but maybe 234x30 or 117x15 would work well... anyway you know the images you're working with better then I do so pick a thumbnail size that works for you.

One last thing... the reason I called them fake thumbnails in the title is because technically the full image is still being loaded. The browser is simply resizing it. For those of you using this script on a remote server... the full files are still being sent over the network. Making this change won't do anything to speed up the transfer... it just makes the files appear smaller... they don't actually get any smaller.


Home |  News |  Samples |  Articles |  Lessons |  Resources |  Forum |  Links |  Search |  Feedback

Internet.com
The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers