Chapter 3: Working with AspUpload
Contents
3.1 Browser-Based File Uploading
In many real-life applications such as online photo albums, before an image is resized it has to be uploaded to the Web server by the user. To capture uploaded images, a server-side upload component such as Persits Software's AspUpload ® has to be used. While AspJpeg can be used in tandem with any upload component, not just AspUpload, our discussion and code samples will be based on AspUpload. For more information about AspUpload, and to download your free 30-day evaluation copy, visit www.aspupload.com.
One or more files can be uploaded from the user's machine to the server using a <FORM> with the attribute ENCTYPE="multipart/form-data" and one or more <INPUT TYPE="FILE"> form items. To capture the uploaded files and save them on the server using AspUpload, one may use the following code:
<INPUT TYPE="FILE" NAME="FILE1">
<INPUT TYPE="FILE" NAME="FILE2">
<INPUT TYPE="FILE" NAME="FILE3">
<INPUT TYPE="SUBMIT" VALUE="Upload!">
</FORM>
upload.asp:
Set Upload = Server.CreateObject("Persits.Upload")
' Save uploaded files
Upload.Save "c:\upload"
' Display paths of uploaded files
For Each File in Upload.Files
Response.Write File.Path & "<BR>"
Next
%>
In addition to HTML forms, files can also be uploaded to the server using various 3rd-party client-side ActiveX controls and Java applets which provide additional features not found in the forms, such as the ability to upload an entire directory, or dragging-and-dropping. These products are outside the scope of this discussion, as we focus on the server-side scripting only. For more information about the client-side upload agents XUpload and JUpload, see the AspUpload.com web site.
3.2 Resizing Uploaded Images
The following code sample enables you to upload an image, resize it, and then save the original and its thumbnail in the MS Access database file aspjpeg.mdb. Notice that this code sample saves the thumbnail to disk and then re-opens it for a database save. A direct memory-to-database procedure is covered in Section 3.3.
Before running this code sample, make sure AspUpload is installed on your server, and use Windows Explorer to give the "Everyone" group full control over the database file aspjpeg.mdb located in the subdirectory \Samples\Db, or a run-time error may occur during uploading.
' Create an instance of AspUpload object
Set Upload = Server.CreateObject("Persits.Upload")
' Compute path to save uploaded files to
Path = Server.MapPath(".")
' Capture uploaded file. Return the number of files uploaded
Count = Upload.Save(Path)
If Count = 0 Then
Response.Write "No images selected."
Response.End
Else
' Obtain File object representing uploaded file
Set File = Upload.Files(1)
' Is this a valid image file?
If File.ImageType <> "UNKNOWN" Then
' Create instance of AspJpeg object
Set jpeg = Server.CreateObject("Persits.Jpeg")
' Open uploaded file
jpeg.Open( File.Path )
' Resize image according to "scale" option.
' We cannot use Request.Form, so we use Upload.Form instead.
jpeg.Width = jpeg.OriginalWidth * Upload.Form("scale") / 100
jpeg.Height = jpeg.OriginalHeight * Upload.Form("scale") / 100
SavePath = Path & "\small_" & File.ExtractFileName
' AspJpeg always generates thumbnails in JPEG format. ' If the original file was not a JPEG, append .JPG ext.
If UCase(Right(SavePath, 3)) <> "JPG" Then
SavePath = SavePath & ".jpg"
End If
jpeg.Save SavePath
' Save both images in the database along with description.
strConnect = "DRIVER={Microsoft Access Driver (*.mdb)};DBQ=" & Server.MapPath("../db/aspjpeg.mdb")
Set rs = Server.CreateObject("adodb.recordset")
rs.Open "images", strConnect, 1, 3
rs.AddNew
' Use File.Binary to access binary data of uploaded file.
rs("original_image").Value = File.Binary
Set ThumbFile = Upload.OpenFile(SavePath)
rs("thumbnail").Value = ThumbFile.Binary
rs("description") = Upload.Form("Description")
rs.Update
rs.Close
Set rs = Nothing
Response.Write "Success!"
Else
Response.Write "This is not a valid image."
Response.End
End If
End If
%>
void Page_Load(Object Source, EventArgs E)
{
// Create an instance of AspUpload object
IUploadManager objUpload;
objUpload = new UploadManager();
String strPath = Server.MapPath(".");
// Save returns the number of uploaded files
int nCount = objUpload.Save(strPath, Missing.Value, Missing.Value);
if( nCount == 0 )
{
txtMsg.InnerHtml = "No images selected.";
return;
}
// Obtain File object representing uploaded file
IUploadedFile objFile;
objFile = objUpload.Files.Item(1);
// Is this a valid image file?
if( objFile.ImageType != "UNKNOWN" )
{
// Create instance of AspJpeg object
IASPJpeg objJpeg;
objJpeg = new ASPJpeg();
// Open uploaded file
objJpeg.Open( objFile.Path );
// Resize image according to "scale" option. // We cannot use Request.Form, so we use Upload.Form instead.
int nScale = int.Parse(objUpload.Form.Item("scale").Value);
objJpeg.Width = objJpeg.OriginalWidth * nScale / 100;
objJpeg.Height = objJpeg.OriginalHeight * nScale / 100;
String strSavePath = strPath + "\\small_" + objFile.ExtractFileName();
// AspJpeg always generates thumbnails in JPEG format.
// If the original file was not a JPEG, append .JPG extension.
if( strSavePath.ToUpper().Substring( strSavePath.Length - 3) != "JPG" )
{
strSavePath += ".jpg";
}
objJpeg.Save( strSavePath );
// Save both images in the database along with description
String strConn = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + Server.MapPath("../db/aspjpeg.mdb");
OleDbConnection myConnection = new OleDbConnection(strConn);
myConnection.Open();
OleDbDataAdapter myDataAdapter = new OleDbDataAdapter ("select * from images", myConnection);
DataSet myDataSet = new DataSet();
myDataAdapter.Fill( myDataSet, "images" );
DataTable tblImages = myDataSet.Tables["images"];
DataRow rowImage;
// Add a new row
rowImage = tblImages.NewRow();
tblImages.Rows.Add( rowImage );
rowImage.BeginEdit();
// Save original image and thumbnail in the database table.
rowImage["original_image"] = objFile.Binary;
IUploadedFile objThumb = objUpload.OpenFile( strSavePath );
rowImage["thumbnail"] = objThumb.Binary;
rowImage["description"] = objUpload.Form.Item("description").Value;
rowImage.EndEdit();
// Without this line, Update will fail.
OleDbCommandBuilder myCB = new OleDbCommandBuilder(myDataAdapter);
myDataAdapter.Update( myDataSet, "images" );
myConnection.Close();
txtMsg.InnerHtml = "Success!";
}
else
{
txtMsg.InnerHtml = "This is not a valid image.";
}
}
</script>
The scripts above require that a Microsoft Access OLEDB provider be installed on your machine, which is largely a relic of the past. Therefore, the links to run these code samples are not provided.
3.3 Memory Uploads
AspUpload is capable of saving uploaded files to memory as opposed to disk. Since AspJpeg can open images from memory, and also save the resultant thumbnails to memory, the entire "upload -> resize -> save in the database" process can be performed without creating temporary files on the server's hard drive which enhances performance, conserves disk space and improves security.
The following code sample is similar to the previous one, except that we use the memory upload feature of AspUpload (the Save method is called without a Path argument), an uploaded image is opened via Jpeg.OpenBinary( File.Binary ), and the resultant thumbnail is saved directly to the recordset via rs("image").Value = Jpeg.Binary:
...
Count = Upload.Save
' Open uploaded file from memory
jpeg.OpenBinary( File.Binary )
' For now, Jpeg.Binary contains the original image
rs("original_image").Value = Jpeg.Binary
...
jpeg.Width = jpeg.OriginalWidth * Upload.Form("scale") / 100
jpeg.Height = jpeg.OriginalHeight * Upload.Form("scale") / 100
' Now Jpeg contains a resized version of the original file
rs("thumbnail").Value = Jpeg.Binary
...
%>
<%@ Import Namespace="System.Reflection" %>
<%@ Import Namespace="ASPJPEGLib" %>
<%@ Page aspCompat="True" %>
<script runat="server" LANGUAGE="C#">
void Page_Load(Object Source, EventArgs E)
{
...
// Save to memory, return the number of uploaded files
int nCount = objUpload.Save(Missing.Value, Missing.Value, Missing.Value);
...
// objJpeg contains original image
rowImage["original_image"] = objJpeg.Binary;
// Resize image according to "scale" option. // We cannot use Request.Form, so we use Upload.Form instead.
int nScale = int.Parse(objUpload.Form.Item("scale").Value);
objJpeg.Width = objJpeg.OriginalWidth * nScale / 100;
objJpeg.Height = objJpeg.OriginalHeight * nScale / 100;
// Now objJpeg contains resized version of original image
rowImage["thumbnail"] = objJpeg.Binary;
...
}
</script>
