csASPUpload - Demo with a Javascript preview
This demonstration shows how to capture image files that are uploaded in an html form and save them to disk on the server. The files needed can be downloaded below and they consist of the sample scripts as well as the trial version of the csASPUpload component.
The demo shows how to make use of the Javascript image object to allow a preview of the image after it has been selected but before it has been uploaded. It also extracts the height and width of the image, which could possibly be used later.
Unfortunately, this example has very limited browser support. It will not work with Netscape / Firefox browsers or with Internet Explorer 7. It does work with earlier versions of Internet Explorer.
There are 2 ASP files which must all be put in the same folder/directory. It must be web shared, set to read, write and execute scripts and the csASPUpload component installed. It assumes the trial version, csASPUploadTrial, is being used. The files are listed below.
| File | Description |
|---|---|
| fileupload.asp | The starting page. It contains an html form for uploading a file, and the Javascript preview and verification. |
| filesave.asp | This is the script that handles the form data. It uses the csASPUpload component to save the file. |
Some of the key points will be explained here, although it should be easy to follow by viewing the code listings.
Fileupload.asp
This is the starting page. It contains an html form with an input type of "file". The important lines of the form are:
<form method="post" action="filesave.asp" enctype="multipart/form-data" name=form1>
<input type="file" name="filesent" onSubmit="return CheckUpload()">
<input type="button" value="Preview" name="Preview" onClick="DoPreview()">
<input type="hidden" name="height" value="0">
<input type="hidden" name="width" value="0">
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 (if the browser supports file uploads).
Two Javascript functions are called. "DoPreview()" is called by the button and it loads the file into an Image object in Javascript and assigns it to the IMG tag. "CheckUpload()" is called when the form is submitted. It checks that the field is not empty and that the image has a .JPG extension. It loads the image into an Image object to find the height and width which are then added to the form as hidden variables.
The Javascript
The DoPreview function is listed below:
function DoPreview()
{
var filename = document.form1.filesent.value;
var Img = new Image();
if (navigator.appName == "Netscape")
{
alert("Previews do not work in Netscape.");
}
else
{
Img.src = filename;
document.images[0].src = Img.src;
}
}
This function loads the file specified in the file input field into a Javascript image object. This is then assigned to the first (and only) image on the page. This is similar to the method of caching images for rollovers. Netscape / Firefox do not allow the Image object to be loaded with a local file. This feature may be deliberate as Javascript was never intended to be able to access the client file system. Unfortunately it prevents this function from working in a Netscape / Firefox browser. Internet Explorer 7 also fails to read the local file which makes this function increasingly obsolete.
The CheckUpload() function is not listed here, but you can view it if you download the demo. It also loads the file into an Image object and performs some verification. If verification fails the form will not be submitted. Verification includes checking that a file has been entered, checking that it has a .jpg extension, and checking that the image has a size. If the image is corrupt or in an invalid format nothing will be loaded into the image object so it will have no height or width.
The height and width properties of the Image object are read and assigned to two hidden form variables so they can be passed to the form processing script.
This function also cannot work with Netscape / Firefox / IE 7 for the same reasons. If the browser is one of these types, the form is not submitted. This part of the function could be removed to allow the file to be uploaded, but the height and width would not be read.
Filesave.asp
This is the script that saves the file. It saves the file in the same directory as this script and it uses the original file name. In a serious application the name and location of the new file would need to be set with more care.
The important lines of the script are:
<%
Set Upload = Server.CreateObject("csASPUpload32Trial.Process")
Upload.Read
Response.Write "Height: " & Upload.Value("height")
& "<br>"
Response.Write "Width: " & Upload.Value("width")
& "<br>"
If Upload.FileQty > 0 Then
Upload.OverwriteMode = 2
Upload.FileSave Upload.CurrentDir & Upload.FileName(0), 0
%>
<p>The file has been stored.</p>
<%
Else
%>
<p>No file has been received.</p>
<%
End If
%>
The first line creates an object called Upload. This example uses the trial version of the component.
Next the height and width are displayed. These have been passed from the previous script as hidden form variables. Note that Request.Form cannot be used when files are uploaded so the Value property of csASPUpload must be used instead. Nothing is actually done with the height and width here, but the demo does show how they can be found and also how to read a form varaible. To perform server side image manipulation, use our csImageFile component.
There is a check that a file has been uploaded before any attempt is made to save it. The If..Then..Else statement allows for conditional HTML output to be used. Before the file is saved, OverwriteMode is set to 2, which automatically renames the file if the name is already used. The CurrentDir property is used to find the directory containing the "filesave.asp" script. The syntax of the FileSave command is:
FileSave FileName, Index
Where FileName is the full physical path and file name and Index is the index of the uploaded file. The index will always be 0 when only one file is uploaded.
- 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.
- Upload to a database - an image is uploaded stored in a binary database field.
- 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.
Other products for file uploading:
We have several upload related products that are used in file uploading either from the client or server side. Of these, csXImage is an ActiveX control which can display images in the browser before uploading them.