Home Download and Buy What's New Live Demos Contact Us
 
3.Using AspUpload

Search this site
 

 

User Manual
Chapter 4: Image Manipulation Chapter 2: Creating Thumbnails Chapter 3: Working with AspUpload

3.1 Browser-Based File Uploading
3.2 Resizing Uploaded Images
3.3 Memory Uploads

3.1 Web-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:

<FORM ENCTYPE="multipart/form-data" ACTION="upload.asp" METHOD="POST">
   <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.

VB Script:
<%
' 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
%>

C#:
<script runat="server" LANGUAGE="C#">

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>

Click the links below to run this code sample:

http://localhost/aspjpeg/manual_03/03_form.asp
http://localhost/aspjpeg/manual_03/03_form.aspx  Why is this link not working?

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:

VB Script:
<%
...
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

...
%>

C#:
<%@ Import Namespace="System.Web" %>
<%@ 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>

Click the links below to run this code sample:

http://localhost/aspjpeg/manual_03/03_form2mem.asp
http://localhost/aspjpeg/manual_03/03_form2mem.aspx  Why is this link not working?

Chapter 4: Image Manipulation Chapter 2: Creating Thumbnails 


Advanced Image Management Advanced
Image Management
for ASP and .NET