Remove and Delete Images with PureASP Upload

This tutorial shows how to toggle PureASP Upload 2.07's "skip empty fields" feature so users can remove images from pages. Also details image deletes on update when the remove option described above is selcted or when a new image is uploaded. Tutorials on multiple image delete and removal on update and on cascade deletes will follow.

Pure ASP Upload 2.07 Update Pages with Image Deletes & Remove Options

George Petrov’s Pure ASP upload is one of the best tool’s I have for creating dynamic web sites. When it came out I was able to quit uploading in pop up windows. But there never really is enough. In addition to image uploads I also felt the page needed to offer the option to remove an image from the page/product/article whatever the case may be without replacing it. And I thought as well, wouldn’t it be neat if when a user decided to remove or replace an image then the old images would be deleted as part of the update. I pestered George about how to toggle the skip empty fields feature off or on so I could take an image off the site as easily as I could put one on it. Finally he answered giving me the last pieces I needed to bring it all together.


First I will set up some conventions to make it easy to follow the tutorial. This tutorial assumes you have created a recordset to populate your form with existing data. If you have not, you will need to create a recordset. Stock UltraDev code that is not concerned with the purposes of this tutorial will be is shown in black. Tutorial code will be blue. Variables that should be unique to your page are shown in red. And comments pertinent to the tutorial will be grey. A sample application including the tutorial in an Adobe *.pdf can be downloaded here: Tutorial Demo Application.

Form Modifications

The first thing you will need to do is add a conditional region to your form. The conditional region will display two elements if the database image field has a value other than null. The first will be image itself. If the user is there to perhaps change the image, it will be handy if they can see it.The second is a checkbox. Name it “delete_image.” I usually do something that looks like this:  

If (rs_news.Fields.Item("N_image").Value) <> "" Then
Response.Write("<tr><td nowrap class=""specialbold"">Existing Image</td><td><img src='"&("../site_images/") & (rs_news.Fields.Item("N_image").Value)&"'></td></tr><tr><td nowrap class=""specialbold"">Delete Image?</td><td><input type=""checkbox"" name=""delete_image"" value=""checkbox""></td></tr>")
End if

The page displays like this without an image . . .  and like this with an image:

The “Delete Image?” checkbox does two things if checked. It turns off the skip empty fields feature of Pure ASP Upload and it turns on the code that deletes the image file from the server. Turning off the skip empty fields feature allows us to set the field N_image in the database back to a null value. And deleting the old image keeps web server resources available for fresh content.

Toggling the Skip Empty Fields Feature

If we are going to delte our images we must set the database image fields back to null values or or pages will display with the dreaded red X. We use simple if... then statement to toggle the feature. Let’s get started Look for the code block that begins with the comment in bold grey below. 

' *** Update Record: (Modified for File Upload) set variables

If (CStr(UploadFormRequest("MM_update")) <> "" And CStr(UploadFormRequest("MM_recordId")) <> "") Then

MM_editConnection = MM_yoursite_STRING
MM_editTable = "News"

MM_editColumn = "N_ID"
MM_recordId = "" + UploadFormRequest("MM_recordId") + ""
MM_editRedirectUrl = "admin_news.asp"
MM_fieldsStr = "N_headline|value|N_image|value|N_paragraph|value"
MM_columnsStr = "N_headline|',none,''|N_image|',none,''|N_paragraph|',none,''"

' create the MM_fields and MM_columns arrays 

Just below the UD comment in bold above is where we insert the code to toggle skip empty fields feature on or off. The skip empty fields feature default is on, so we’re going to insert a bit of code that turns it off. This way the null value from the N_image form field will update the database to a null value. All that’s really needed is the first line beginning with if and the last line that closes the if then statement “end if.” The other two lines are produced by PureASP UpLoad 2.07.

‘toggle skip empty fields feature off 
if UploadFormRequest("delete_image") = "" then 
MM_columnsStr = FixColumnsForUpload(MM_fieldsStr,MM_columnsStr)
MM_fieldsStr = FixFieldsForUpload(MM_fieldsStr,MM_columnsStr)
end if

MM_fields = Split(MM_fieldsStr, "|")
MM_columns = Split(MM_columnsStr, "|")
' set the form values
For i = LBound(MM_fields) To UBound(MM_fields) Step 2
MM_fields(i+1) = CStr(UploadFormRequest(MM_fields(i)))
' append the query string to the redirect URL
If (MM_editRedirectUrl <> "" And UploadQueryString <> "") Then
If (InStr(1, MM_editRedirectUrl, "?", vbTextCompare) = 0 And UploadQueryString <> "") Then
MM_editRedirectUrl = MM_editRedirectUrl & "?" & UploadQueryString
MM_editRedirectUrl = MM_editRedirectUrl & "&" & UploadQueryString
End If
End If
End If

Deleting the Image

In this section we check two conditions:  The user is deleting the existing image or is uploading a new image. In either case, we delete the existing image. First we check if the database has a value for an existing image, then check if the image exists on the server, and if it exists, delete it.

First we get the two functions from Marcellino Bommezijn’s great tutorial on deleting images when updating or deleting a record. Then we can follow his instructions and insert them here or they can used in include as well.

Function newFileSystemObject()
set newFileSystemObject=Server.CreateObject("Scripting.FileSystemObject")
End Function
Function fileExists(aFileSpec)
End Function

Notice we place the functions above the UD code block preceded by the comment in bold below:

' *** Update Record: (Modified for File Upload) construct a sql update statement and execute it

If (CStr(UploadFormRequest("MM_update")) <> "" And CStr(UploadFormRequest("MM_recordId")) <> "") Then
' create the sql update statement
MM_editQuery = "update " & MM_editTable & " set "
For i = LBound(MM_fields) To UBound(MM_fields) Step 2
FormVal = MM_fields(i+1)
MM_typeArray = Split(MM_columns(i+1),",")
Delim = MM_typeArray(0)
If (Delim = "none") Then Delim = ""
AltVal = MM_typeArray(1)
If (AltVal = "none") Then AltVal = ""
EmptyVal = MM_typeArray(2)
If (EmptyVal = "none") Then EmptyVal = ""
If (FormVal = "") Then
FormVal = EmptyVal
If (AltVal <> "") Then
FormVal = AltVal
ElseIf (Delim = "'") Then ' escape quotes
FormVal = "'" & Replace(FormVal,"'","''") & "'"
FormVal = Delim + FormVal + Delim
End If
End If
If (i <> LBound(MM_fields)) Then
MM_editQuery = MM_editQuery & ","
End If
MM_editQuery = MM_editQuery & MM_columns(i) & " = " & FormVal
MM_editQuery = MM_editQuery & " where " & MM_editColumn & " = " & MM_recordId
If (Not MM_abortEdit) Then
' execute the update
Set MM_editCmd = Server.CreateObject("ADODB.Command")
MM_editCmd.ActiveConnection = MM_editConnection

We insert the rest of the code from Marcellino Bommezijn’s tutorial here. Be certain to note the last line of code above in bold black and the first line of code below our new code block in bold black. The creation of the fso and image delete must occur in this space--before the databse is updated! First we check to see if there’s a new image being uploading or if the user selected the checkbox we created to remove the existing image. If either condition is true, we execute the delete. 

' delete the file before we delete the record
' check to see if delete should run (the field N_Image in the first line
should be your form's image field name)
If UploadFormRequest("N_image")<> "" OR UploadFormRequest("delete_image") <> "" Then
' create file scripting object
Set File = CreateObject("Scripting.FileSystemObject")
ImagePath = Server.MapPath("..\site_images\")
ImagePath = ImagePath & "\" & (rs_news.Fields.Item("N_image").Value)
' check if file exists and if true delete the file
If fileExists(ImagePath) Then
End If
End if
' end delete image code

It’s back to stock UD generated code and that’s all there is to it. Don’t forget to download the sample application and the tutorial.pdf.

MM_editCmd.CommandText = MM_editQuery
If (MM_editRedirectUrl <> "") Then
End If
End If
End If

James Threadgill

James ThreadgillJames Threadgill has authored numerous tutorials on ASP and ASP.NET web development, published on such sites as the Dynamic Zones and MSDN Accademic Alliance. He co-authored the Sam's book Dreamweaver MX: ASP.NET Web Development.

James first began computer programming in 1995 while attending Alvin Community College. He completed a certificate of computer science program and an Associate of Arts degree at Alvin before going on to the University of Houston-Clear Lake where he was awarded a Bachelor of Science and a Master of Arts.

James publishes fiction, poetry, and visual arts under the name Wayne James. His fiction first appeared in Raconteur in 1995 and since has been published numerous times: in Hadrosaur Tales 5 and 7, Bayousphere, and in the Write Gallery e-zine. His poetry first appeared in the small press magazine Lucidity in 1996 and has been published numerous times since. His collection of fiction and poetry, When Only the Moon Rages, was released in 2000. Most recently his work appeared in Tales of the Talisman winter 2010 and spring 2011 issues. James currently attends graduate school at the University of Houston and owns and operates small web design and internet marketing firm, WWWeb Concepts, with his wife, Karen, in Houston, TX USA.

See All Postings From James Threadgill >>


Extremely Useful

May 14, 2003 by Lil Peck
OK, not so dumbed down and easy :(  lol that all I had to do was copy and paste, but it gave one the very satisfying experience of adapting the code to one's project.

Needs to be updated

November 14, 2004 by Charles Beaudry

This particular chunk of code needs to be updated to work with the add-on pack.

Because the add-on pack has a "delete file before update" function, a user will encounter an error if thrying to replace the image because the add-on pack code will delete the file. The routine in this piece of code will then generate an error because it is trying to find a file that doesn't exist.

The code itself also does not delete the image anymore because the routines have been modified by the add-on pack.

RE: Needs to be updated

November 15, 2004 by James Threadgill

That's more than likely because this tutorial predates the "Add On Pack", charles... Misread you didn't I. Sorry, I have a lot of updating to do.   

RE: RE: Needs to be updated

November 15, 2004 by Charles Beaudry

Which is precisely why I stated that it needed to be updated. The add-on pack does not have a "delete image" function. However, I did figure out that all that is needed is to remove the "delete file before update" routine and it should work fine. In fact, this chunk of code should be the one in the add-on pack.

The other thing to check in the code is to ensure that the code calling the recorset with the image is placed before the update routine on the page. Most times the PU and update code is placed before the opening of the recordset by Dreamweaver. If the code to open the recordset isn't placed above the update code, it will also cause an error.

See all 7 Comments

You must me logged in to write a comment.