Scanning and uploading images with Javascript and csXImage

We have a downloadable example that shows how to use the csXImage ActiveX control to scan an image from a Twain device and upload it to a remote server. This demo can be downloaded.

The demo uses the trial version of csXImage. For a client side application the control does not need to be registered on either the server or the client, but the files need to be unpacked from the installer and the .ocx and .lpk files placed on the server as described in our introduction to using csXImage client side. The description here is based around the classic ASP version although there are only minor changes needed to the client side code to use it with other server side scripts.

The HTML page - TwainUploadASP.htm

The .ocx control and the licence package file are called using the following code. The object tag for the licence package file must always appear before the object tag for the .ocx control. The two files specified must be in the same folder as the web page, or the paths must be changed to suit

The OnLoad event for the page is used to run some initialisation code. This disables buttons that are not relevant until an image has been loaded.

Clicking the button marked "Select Device" runs some code that calls the SelectTwainDevice method which allows the user to select a Twain compatible scanner or camera. If a device is successfully selected and it is plugged in the TwainConnected property will return true and the "Scan Image" button can be enabled.

function SelectClick()
{
  csxi.SelectTwainDevice();
  if (csxi.TwainConnected)
  {
    document.form1.scanbutton.disabled = false
  }
}

The scan is initiated by the "Scan Image" button. The code is simple and most of it deals with enabling appropriate buttons if an image has been acquired. The Acquire method is all that is needed to scan an image once the scanner has been selected. The ImageHeight property is checked and if it is non-zero an image must have been loaded into the control.

function ScanClick()
{
  csxi.Acquire();
  if (csxi.ImageHeight != 0)
  {
    document.form1.uploadbutton.disabled = false
    document.form1.rectbutton.disabled = false
    document.form1.leftbutton.disabled = false
    document.form1.rightbutton.disabled = false
  }
  else
  {
    document.form1.uploadbutton.disabled = true
    document.form1.rectbutton.disabled = true
    document.form1.cropbutton.disabled = true
    document.form1.leftbutton.disabled = true
    document.form1.rightbutton.disabled = true
  }
}

The code that uploads the image needs to be modified from the file that is supplied with the demo. The PostImage method requires a full URL to the script on the server that is saving the file. The second parameter is a file name which may be used by the server when saving the file. The fourth parameter specifies the file format that will be used for the upload. 2 is a JPG. If it was to be uploaded as a TIFF, that would be 7. If it was a TIFF the Compression property could be set first.

This example uses our own ASP component for saving the file. If a different component is used it may be necessary to specify the third parameter of PostImage, which is the name of the form variable. That is the equivalent of the Name attribute when uploading using <input type="file" name="***">

function UploadClick()
{
  Success = csxi.PostImage('http://www.yourserver.com/filesave.asp', 'scan.jpg', '', 2);
  if (Success)
  {
    alert('Image Uploaded')
  }
  else
  {
    alert('Upload Failed')
  }
}

The ASP script - filesave.asp

This script uses the trial version of our csASPUpload component and it must be registered on the server. The script itself is quite simple. It creates an instance of the component, sets the OverwriteMode property so that duplicate file names will be renamed before saving, then it saves the file.

Set Upload = Server.CreateObject("csASPUploadTrial.Process")
'OverwriteMode = 2 renames the file ~1, ~2 etc if name already exists
Upload.OverwriteMode = 2
Upload.FileSave Upload.CurrentDir & Upload.FileName(0), 0

If the files are not uploading and saving correctly some debugging will be required. A good starting point is to create a simple form for uploading from a web page and try to post a file to the ASP script. If there is an error with the script, such as a problem with permissions or with the registration of the component, the error will be visible. Further debugging is possible by reading the value of the PostReturnFile property after an upload to see what error message has been written by the server.

Other Javascript demos and code fragments.

Scanning and uploading images with Javascript and csXImage

The HTML page - TwainUploadASP.htm

The ASP script - filesave.asp

Cookies