ASP image upload and resize example - Saving a JPG to a database ASPPhotoResizer

This is a downloadable demo showing how to use our ASPPhotoResizer and ASPFileSaver components to save uploaded JPEG images into an Access database using ASP, and resizing them at the same time. It forms a miniature application allowing images to be uploaded, viewed and deleted. Both the ASPPhotoResizer and ASPFileSaver components must be registered on the server before this demo can be run. These components and the demo files can be downloaded using the links below.

Download the demo - resizedb.zip (9 KB)

Download the ASPPhotoResizer trial (2.5 MB)

Download the ASPFileSaver trial (2.1 MB)

The demo, resizedb.zip, contains the following files.

File Description
fileupload.htm The starting page. This contains an HTML form for uploading a JPEG image to the server.
filesave.asp The script that resizes the image and saves it into the database. This script calls the ASPFileSaver component to capture the file and ASPPhotoResizer to resize and save it.
view.asp This lists the images that have been stored in the database.
delete.asp This allows a database record to be deleted.
imagedata.mdb The MS Access file. It contains two fields, a text field for the file name and an OLE Object field for storing the image as binary data.
readme.txt A description of the application, including some troubleshooting tips.

Some of the important features are explained below.

fileupload.htm

This page contains a form with the input type="file" tag allowing the user to upload a file. The "enctype" attribute must be set as shown:

<form method="post" action="filesave.asp" enctype="multipart/form-data">
<input type="file" name="filesent">
<input type="submit" value="Send File">
</form>

filesave.asp

This script uses ASPFileSaver to capture the uploaded file and ASPPhotoResizer to resize it and save it to the database. First, an instance of each component is created. This code shows the 32 bit trial versions used. The Database used is MS Access, which is 32 bit.

Set Upload = Server.CreateObject("ASPFileSaver32Trial.FileSave")
Set JPG = Server.CreateObject("ASPPhotoResizer32Trial.Resize")

The rest of the script consists of two nested If..Then..Else statements. The first checks if a file has been uploaded. The second checks that the extension of the file is .jpg or .jpeg. If both tests are true the image can be read into ASPPhotoResizer to resize and save it. Appropriate messages are written for each condition. The image is resized using the ResizeBox function.

If Upload.FileSize > 0 Then
  If (LCase(Upload.FileExtension) = "jpg") or _
   (LCase(Upload.FileExtension) = "jpeg") Then
    MaxWidth = 150
    MaxHeight = 100
    JPG.VariantIn Upload.FileAsVariant
    JPG.ResizeBox MaxWidth, MaxHeight
    DataConnection = "PROVIDER=MICROSOFT.JET.OLEDB.4.0;DATA SOURCE=" & _
      Server.MapPath(".") & "\imagedata.mdb"
    Set DBConn = Server.CreateObject("ADODB.Connection")
    DBConn.Open DataConnection
    SQL = "SELECT * FROM Table1 where Filename='" & Upload.Filename & "'"
    Set Recordset = Server.CreateObject("ADODB.Recordset")
    Recordset.Open SQL, DBConn, 1, 2
    If Recordset.EOF Then
      Recordset.AddNew
    End If
    Recordset("Filename") = Upload.Filename
    Recordset("Image") = JPG.VariantOut
    Recordset.Update
    Recordset.Close
    DBConn.Close
    'File saved
  Else
    'Incorrect file type
  End If
Else
    'No file uploaded
End If

The database is opened using a DSN-less connection so that the demo requires less setting up. The recordset is opened on a search for the file name so either the file name is already present and the record will be overwritten or a new record is added. The VariantOut command exports the JPG image as a variant array which can be stored in the OLE Object field.

view.asp

view.asp opens the database and loops through all the records. It writes out an IMG tag for each record and uses stream.asp as the SRC attribute. It includes the file name as a querystring parameter so that stream.asp can open the database at the correct record to display the image. The URL is encoded using Server.URLEncode in case the file name contains characters that are not allowed in HTML.

Response.Write "<img src=streamimage.asp?NAME=" &_
  Server.URLEncode(Recordset("FileName")) & ">"

streamimage.asp

This opens the database using the file name to find the correct record. It sends binary output to the browser using the BinaryWrite command. The lines which stream the image are shown below. Response.AddHeader is not required, but if the image is to be saved through the browser it will specify the file name that will be prompted. Without it the "Save As" prompt would suggest the script name, streamimage, for the file name.

Response.ContentType = "image/jpeg"
Response.AddHeader "Content-Disposition", "inline; filename=" &_
  Request.QueryString("name")
Response.BinaryWrite Recordset("Image")

Other Examples