Javascript / ActiveX demo to select and resize an image before uploading to a web server.
This demo uses the csXImage ActiveX control to preview and resize an image before uploading it to a remote web server using an HTTP post. csXImage is used as a client side control in a web browser running Javascript. To run it you need to have the csXImage trial ActiveX / OCX control installed on your system as well as MS Internet Explorer. The server needs to be able to save an uploaded file. We have three variations of this demo, each using a different method to save the uploaded file, ASP, ASP.NET and PHP. The client side script is the same in each case.
ASP Version
To run this version you need the csXImage trial ocx control installed on your system as well as MS Internet Explorer. The server side ASP script needs our csASPUpload component registered on the server. Both can be downloaded below as well as the sample scripts.
Download the trial csXImage control - csXImageTrial.exe (1.8 MB)
Description of the demo. The client side code is the same in all versions.
ASP.NET Version
To run this version you need the csXImage trial ocx control installed on your system as well as MS Internet Explorer.
Download the trial csXImage control - csXImageTrial.exe (1.8 MB)
The example scripts (ASP.NET) - ResizeUploadASPNET.zip (42 KB)
PHP Version
To run this version you need the csXImage trial ocx control installed on your system as well as MS Internet Explorer. The server side script is PHP so your server must be able to run this. The control and sample scripts can be downloaded below. PHP can save file uploads without any third party components.
The ActiveX control csXImage includes a range of functions for editing images and this demo makes use of the ResizeImage function for reducing the image size before either saving or uploading the file. It also demonstrates the LoadDialog function which provides the user with a dialogue box for selecting an image file from their local file system. The SaveDialog function is also demonstrated to show how a file can be saved back to the local file system after editing. The image formats supported by csXImage are jpg, bmp, gif, png, tif, psd, pcx and wbmp.
csXImage has a function called PostImage, which will send the currently loaded image to a remote server as an HTTP post, in a similar way to using the <input type="file"> tag in a web form. This method of uploading requires a script on the server that can receive the file and this demo shows solutions for ASP, ASP.NET and PHP. Other possibilities are available, such as Cold Fusion, but these are not demonstrated here.
The demo application consists of a single web page containing an instance of csXImage and some buttons to operate it. The formatting and Javascript coding has been kept to a minimum to make it easier to understand. The buttons are enabled and disabled as the application progresses so that they can only be clicked when they have something to do.
The first task is to open an image, and the other buttons are disabled until this is done. Once an image is loaded the buttons for saving, uploading and clearing the image are enabled. The new sizes for the resized image are specified using radio buttons, with a choice of three new sizes. A new width is set and the aspect ratio is maintained. The resize will only be carried out if the new size is smaller than the current size.
A longer description of this demo is provided in the ReadMe.txt file included in each download.
Using csXImage as a client side control in a browser.
Saving file uploads on a server with ASP and csASPUpload.
Saving file uploads on a server with ASP.NET and csNetUpload.
PostImage - The HTTP upload method in csXImage
The PostImage command can be used to upload any image contained in the csXImage control. It can be used in other programming environments, not just in a web browser, although it needs an active internet connection and the Wininet.dll file must be present (installed with Internet Explorer). PostImage can be difficult to troubleshoot if it does not work immediately. It returns a Boolean value as a status report but this only shows if the remote script returned a 200 OK message. Failure to receive a 200 message can mean anything from not having an internet connection, through having an invalid URL to a syntax error in the remote script. A 200 message does not prove that the file was uploaded and some scripting systems, such as PHP, generate HTML error messages that describe an error but still produce a 200 OK result. The PostReturnCode property can identify if the connection failed because it will return 0 in this case instead of a 200 or 500 if the connection was successful.
When problems are encountered the remote script should be checked using a simple HTML form, because then the results can be seen. Another common error is not setting the FormVarName parameter of PostImage. This is not needed by our csASPUpload or csNetUpload components but some other components and PHP and Cold Fusion all use this value when extracting the file from the server. If the server restricts uploads above a certain size this could lead to upload failures that do not have an obvious cause. When testing with your simple HTML form, use files of a comparable size.
Further debugging is possible using the PostReturnFile property which returns a text string containing the output from the server side script after uploading. This can be displayed using a Javascript alert box after calling PostImage but often a better way is to use the Javascript innerHTML property to display the server side result directly.
Add the following in the Javascript immediately after PostImage:
x=document.getElementById("returnfile");
x.innerHTML = csxi.PostReturnFile;
Add the following in the HTML body:
<div id="returnfile"></div>
Uploading with FTP - The FTPImage method
The FTPImage method allows the image in csXImage to be sent directly to an FTP server. It requires an FTP account with a username and password and these details will be visible if the user views the script. It removes the need for a server side script to save the file. For more details, refer to the csXImage instructions.
Other File Upload Products
Visit our upload products page for a summary of the client and server side components that we have for transferring files between client and server, or between two servers.
- Other Javascript examples using the csXImage ActiveX control.
- Client Side Example - Description of how to use csXImage in a web browser.
- Twain Client Side Example - Scanning an image and uploading to a server.
- Client Side Scanning with ADF - Scanning multiple images using an ADF scanner.
- Client Side Multi-page TIFFs - View edit or scan multi-page TIFF images.