ASP example of uploading images, resizing and saving to a database

This is an example of using both the csImageFile and csASPUpload components to capture a JPEG image as a browser upload, resize it, and save it to a MS Access database. The files needed can be downloaded below, together with the trial components.

Download the example - resizedemo.zip (64 KB)

Download the trial csImageFile component - csift.zip (4.5 MB)

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

The sample 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 processes the upload and saves the image to the database. 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.
ReadMe.pdf A description of the demo with some troubleshooting tips.

The files must all be put in the same folder, which must be web shared with permission to run scripts. The database file, imageDB.mdb or imageDB.accdb, must have its permission set to allow the Internet Guest User to modify it. The ReadMe.pdf file provides further explanation.

Description of process.asp

The first commands are concerned with forming the database connection string. The remaining lines read in the file and check that it is a JPG. If it is, the size is checked. In this demonstration it will be resized to a maximum height or width of 150 pixels. If it is already less than 150 pixels, no change is made. A different size can be used by changing the parameters to the ResizeFit method.

First create an instance of the csASPUpload (trial) component. This line might need to be modified to suit the version of the component used.

<%
Set Upload = Server.CreateObject("csASPUpload32Trial.Process")
%>

The next part is the real working part of the script.

<%
'Read the upload
Upload.Read
'For a successful upload FileQty will be 1
If Upload.FileQty > 0 Then
  'Check that the file is a JPG or JPEG by reading the file extension.
  If UCase(Upload.Extension(0)) = "JPG" or & _
      UCase(Upload.Extension(0)) = "JPEG" Then
    Set Image = Server.CreateObject("csImageFileTrial.Manage")
    'Pass the JPG from csASPUpload to csImageFile
    Image.ReadVariant Upload.FileData(0)
    'Resize the image to a maximum of 150 x 150 pixels
    Image.ResizeFit 150, 150
    .
    .
    'Open the database, create a new record and fill in the details
    'Only the line that writes the file data to the database is shown here.

    Recordset("Image") = Image.JPGData
    .
    .
  Else
    .
    'The file was not a JPG
    .
  End If
Else
  .
  'No file received
  .
End If
%>

This example resizes images to a specific size. With some modifications it could scale the image using the Scale method. The file size could be reduced by specifying a new value for the JpegQuality property. It currently takes the default value of 90. A further reduction in file size could be possible by calling the ClearMetaData method, which will remove any embedded Exif or IPTC data, which can take up several KB inside the file and it is rarely needed in a thumbnail image.

If you want to save the full sized image to disk as well as the reduced size to database, use the WriteFile method of csImageFile after calling ReadVariant but before the resizing operations. See the online manual for more on these methods and properties.

This example shows the data saved as a binary or BLOB field. It is possible to use Base64 encoding of the data and save it as text as described here.

There are some working examples in our live demonstration area.

Full list of available ASP demos and tutorials.

Cookies

This site uses cookies for functionality, traffic analysis and for targeted advertising. Click the Accept button to accept our Cookie Policy. The Cookie Policy page offers configuration for a reduced set of cookies for this site.