Resizing and uploading images with Javascript and csXImage
We have a downloadable example that shows how to use the csXImage ActiveX control to select a local image, resize it 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 - ResizeUploadASP.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
<object classid="clsid:5220cb21-c88d-11cf-b347-00aa00a28331">
<param name="LPKPath" value="csximagetrial.lpk">
</object>
<object id="csxi" classid="CLSID:D7EC6EC3-1CDF-11D7-8344-00C1261173F0"
codebase="csximagetrial.ocx" width="800" height="600"></object>
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 "Load Image" runs some code that calls the LoadDialog method which allows the user to select an image of a supported format from their local hard drive. LoadDialog has a Boolean return value so querying this finds if an image has been loaded. If so, some action can be taken. Buttons that were disabled when the page was loaded can now be enabled. The LastFileName property is used to find the name of the file loaded and the file type is found for use later.
function OpenClick()
{
if (csxi.LoadDialog())
{
document.form1.uploadbutton.disabled = false;
document.form1.savebutton.disabled = false;
document.form1.clearbutton.disabled = false;
document.form1.resizebutton.disabled = false;
FileName = csxi.LastFileName;
FileName = FileName.substring(FileName.lastIndexOf('\\') + 1);
FileExt = FileName.substring(FileName.lastIndexOf('.') + 1);
switch (FileExt.toUpperCase())
{
case 'BMP' :
FileType = 0;
break;
case 'GIF' :
FileType = 1;
break;
case 'JPG' :
FileType = 2;
break;
case 'PCX' :
FileType = 3;
break;
case 'PNG' :
FileType = 4;
break;
case 'WBMP' :
FileType = 5;
break;
case 'PSD' :
FileType = 6;
break;
case 'TIF' :
FileType = 7;
break;
case 'TIFF' :
FileType = 7;
break;
default :
FileType = 2;
break;
}
}
}
The image resize is triggered by a button. The code is simple and most of it involves reading the radio buttons that specify the new size. ResizeImage is the method that resizes the image inside the control before uploading.
function ResizeClick()
{
var NewWidth;
if (document.form1.size[0].checked)
{
NewWidth = 800
}
if (document.form1.size[1].checked)
{
NewWidth = 600
}
if (document.form1.size[2].checked)
{
NewWidth = 200
}
if (NewWidth < csxi.ImageWidth)
{
csxi.ResizeImage(NewWidth, 0)
}
}
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. Our 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="***">
The FileName and FileType variables were set when the image was loaded.
function UploadClick()
{
Success = csxi.PostImage('http://www.yourserver.com/filesave.asp', FileName, '', FileType);
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.