csASPUpload - Uploading Images to a Database Field with ASP

This demonstration shows how to capture image files and store them in an Access database. The files needed can be downloaded below and they consist of the sample ASP scripts as well as the trial version of the csASPUpload component.

Download the sample ASP scripts - dbdemo.zip (16 KB)

Download the trial component - csupt.zip (2.2 MB)

In this example we show how to store images in a database as binary data. Sometimes it is better to store each image as a file and only use the database to store information about the image. We have another example showing how to save images to disk.

There are 5 ASP files, an HTML file as well as a DSN file and an MDB file, which must all be put in the same folder/directory. It must be web shared, set to execute scripts and the csASPUpload component installed. It assumes the 32 bit trial version, csASPUpload32Trial. The actual files are listed below.

File Description
upload.htm The starting page. It contains an html form for uploading a file.
process.asp This is the script that handles the form data. It is the main script in this demonstration.
dbview.asp This lists files stored in the database.
imageview.asp The page that displays an image.
dbview1.asp This gets the data for the image and streams it to the browser.
delete.asp This deletes everything from the database.
access.dsn The file DSN for connecting to the database. It may not be needed, depending on the connection method used.
imageDB.mdb The Access database file itself (empty to start with).

Some of the key points will be explained here, although it should be easy to follow by viewing the code listings.

Database Connections

The ASP pages process.asp, dbview.asp, dbview1.asp and delete.asp all open a database connection. They use OLE DB to make that connection. If this is not installed, or a different version is installed there is a line in each script which will connect using the file DSN provided. This line is remarked out by default. The example below is from process.asp.

<%
  Scriptname = "process.asp"
  DirPath = Left(Request.ServerVariables("PATH_TRANSLATED"), _
    Len(Request.ServerVariables("PATH_TRANSLATED")) - Len(ScriptName))

  'DataConnection = "filedsn=" & DirPath & "access.dsn" & _
  '  ";DBQ=" & DirPath & ImageDB.mdb"

  DataConnection = "PROVIDER=MICROSOFT.JET.OLEDB.4.0;DATA SOURCE=" & _
    DirPath & "ImageDB.mdb"
%>

DirPath is a variable containing the actual directory of the scripts. Note that it it is found by reading the path of the current script and then removing the script name. csASPUpload has the CurrentDir property for this if an instance of the object has been created.

DataConnection is a string variable used later to open the connection. You should only use the alternative File DSN method if OLE DB does not work because it is not as efficient.

Upload.htm

This is the starting page. It contains an html form with an input type of "file". The important lines are:

<form method=post action="process.asp" enctype="multipart/form-data">
<input type=file name=filesent>

The first part gives the script that will process the form, and the method of sending the data. The tag <input type="file"...> causes the browser to show a text field for the filename and a browse button (if the browser supports file uploads).

Process.asp

This is the script that processes the form data and uses the csASPUpload component to store the uploaded file into the database. The main features are as follows:

<%
  .
  .
  'Set the value of DataConnection for use later (see earlier).
  .
  .
  'Create an instance of the upload component, this assumes the 32 bit trial
  'version is used.

  Set Obj = Server.CreateObject("csASPUpload32Trial.Process")

  .
  .
  'Read the upload.
  Upload.Read
  .
  .
  'Check that a file has been uploaded and do something with it.
  If Obj.FileQty > 0 Then
    Set DBConn = Server.CreateObject("ADODB.Connection")
    DBConn.Open DataConnection
    SQL = "SELECT * FROM Images where 1=2"
    Set Recordset = Server.CreateObject("ADODB.Recordset")
    Recordset.Open SQL, DBConn, 1, 2
    'The database is open and ready for writing
    'Add a new record and fill in the database fields

    Recordset.AddNew
    Recordset("FileName") = Obj.FileName(0)
    Recordset("Image") = Obj.FileData(0)
    Recordset("Extension") = Obj.Extension(0)
    Recordset("ContentType") = Obj.ContentType(0)
    Recordset.Update
    Recordset.Close
    DBConn.Close
    .
    .
    'The rest is just html and completing the If statement
%>

There are some points to note here. The properties of the uploaded file, FileName, FileData, Extension and ContentType are all zero based arrays. csASPUpload supports multiple file uploads, so more than one <input type="file"..> tag can be used in the form. In this case only one file is called for, so the index is always zero. If there was a second file it would be accessed with an index of "1".

"ContentType" is the MIME type of the file. That is stored in the database because it will be needed later when streaming the data to the browser.

In this example there is little verification of the data. The property FileQty is checked to ensure that a file has been uploaded, but it could be of any type. Although the example is intended for use with image files there is nothing here to prevent other files being uploaded and stored. Files that are not images will not display without modifying dbview.asp

The field in the database that stores the file data is called "Image" and it is of type "OLE Object" in MS Access. The script dbview1.asp will be used later to retrieve this data and stream it to the browser.

Dbview.asp

This page just lists the entries in the database and provides a link to imageview.asp in order to view uploaded files.

Imageview.asp and Dbview1.asp

These two scripts together use a technique for extracting binary data from a database and streaming it to a browser. Imageview.asp contains an <img> tag where the source file is an asp script, not an image.

<img src="dbview1.asp" ...>

The way that html pages containing images work means that the script dbview1.asp will execute, and if its output is of the correct type it will display as an image.

A simplification of dbview1.asp is now shown:

<%
  'The output is a binary stream NOT html, so the next three lines
  'should be included.

  Response.Expires = 0
  Response.Buffer = true
  Response.Clear
  .
  .
  'Make the database connection and open it.
  'The FileName is passed in the URL string.
  'Two database fields are used, ContentType and Image (the file data itself).
  'The next three lines stream the file data

  Response.ContentType = Recordset("ContentType")
  Response.AddHeader "Content-Disposition", "inline; filename=" & _
  Request.QueryString("Name")
  Response.BinaryWrite Recordset("Image")
  .
  .
  'Then close the database.
%>

For an ordinary web page, the ContentType is "text/html". If we want to send a different data type we need to specify the appropriate ContentType. If it was a JPEG image we would use Response.ContentType = "image/jpeg".

Response.BinaryWrite is used to send binary data to the browser, instead of plain text.

The Response.AddHeader indicates to the browser what file type is to follow. Some browsers do not need this but it is safer to include it.

Delete.asp

This deletes all the data in the database.

That covers using csASPUpload with a MS Access database. Converting it to run with a different database system would require a new database table in place of the MDB file and changes to the connection string. Access stores raw binary data in a field of type "OLE Object", but other systems have different data types. For example, SQL Server uses a data type called "image".