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 (142 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 choice of 2 Access files (MDB and ACCDB). These must all be put in the same folder, which must be web shared, set to execute scripts and the csASPUpload component installed. It assumes the 32 bit trial version, csASPUpload32Trial, but the class strings are shown for the other versions of the component. 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.
dblist.asp	This lists files stored in the database.
imageview.asp	The page that displays an image.
dbstream.asp	This gets the data for the image and streams it to the browser.
delete.asp	This deletes everything from the database.
imageDB.accdb	The Access database file itself (empty to start with).
imageDB.mdb	An older version of the database file.

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, dblist.asp, dbstream.asp and delete.asp all open a database connection. They use OLE DB to make that connection. The file name is specified so there are two options with one remarked out. The default is to use the newer .accdb file. Change the code to use the .mdb file if the older version of Access is to be used. The example below is from process.asp.

<%
DataConnection = "DRIVER={Microsoft Access Driver (*.mdb, *.accdb)}; DBQ=" & _ Server.MapPath("ImageDB.accdb")
'DataConnection = "DRIVER={Microsoft Access Driver (*.mdb, *.accdb)}; DBQ=" & _ Server.MapPath("ImageDB.mdb")

DataConnection is a string variable used later to open the connection.

Upload.htm

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

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 to select the file.

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 dblist.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 dbstream.asp will be used later to retrieve this data and stream it to the browser.

Dblist.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 Dbstream.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.

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

A simplification of dbstream.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 Access 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".

It would be possible to convert the raw data to Base64 and store this in a text field. Base64 encoding produces a larger file size but it can be easier to use in a database, because it is text and can be used in SQL statements. csASPUpload provides the FileAsBase64 command to convert the uploaded file and this would be used instead of the FileData command.

Other examples of using csASPUpload:
Upload to a database and resize - the uploaded image is resized using csImageFile and stored as raw data in a database.
Save using Base64 encoding - resizing the image using csImageFile.
Upload files to disk - the uploaded files are stored to disk and can be viewed and deleted.
Upload to disk and resize - an image is resized and stored on disk using csImageFile.
Online demo to upload an image - working example to upload an image and see it displayed.