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 = FalseElse
blnShowImages = CBool(Request.QueryString("ShowImages"))
End IfIf Request.Form("btnDelete") = DeleteButtonLabel ThenSet objFSO = Server.CreateObject("Scripting.FileSystemObject")
For Each strFileName In Request.Form("delete")
objFSO.DeleteFile(Server.MapPath(ImageFilePath & "/" & _
strFileName))
NextSet objFSO = NothingEnd 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 IfNextSet objFolder = NothingSet 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:
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.
