This product was discontinued

Classic ASP

A lot of websites based on classic ASP already use Upload Suite to organize uploads to their sites. Let's see how you can integrate it with your site.

Integration of any uploader requires doing two things:

Insert upload interface to a page.
Create server script which processes uploads (saves files on a server, etc).

Upload Suite includes a special JavaScript module which allows you creating the upload interface and configure the uploader very easily.

As for the server-side part, you can use one of the familiar third-party component such as ABCUpload, DundasUpload or Persits AspUpload. If you don't want to install a component on your server, it is possible to use even pure VBScript upload processor.

Let's see how you integrate Upload Suite with your site step by step.

Inserting the uploader interface

Upload Suite consists of two uploaders - a lightweight uploader based on HTML5/Flash and more advanced Java/ActiveX uploader. You can use either one of them or both.

Before we start

First, let's make some preparations:

Download and install the Upload Suite from Aurigma’s website.
Copy JavaScript files and HTML5 uploader CSS to your application folder. The files can be found in the HTML5/Flash Uploader installation folder (typically it’s C:\Program Files (x86)\Aurigma\Upload Suite [version number]\HTML5-Flash\Scripts). Put these files to the Scripts folder in our sample application.
If you need to use Java/ActiveX uploader instead, copy all files from C:\Program Files (x86)\Aurigma\Upload Suite [version number]\ActiveX-Java\Scripts. Note, it is not recommended to mix HTML5/Flash and Java/ActiveX scripts in the same folder.
Choose your favorite server-side upload processing component, download and install it if necessary. In this article, we will use Persits AspUpload, but you can find code examples for other components in the Upload Suite demo applications.

Inserting HTML5/Flash Uploader

The first thing you need to do is to link HTML5/Flash uploader scripts and styles with the page where you are going to use it (the ones you copied to your server as per previous section). There are two files you generally need to link:

css/aurigma.htmluploader.control.css — HTML5 Uploader style sheet.
aurigma.imageuploaderflash.min.js — Flash Uploader related scripts.
aurigma.htmluploader.control.js — HTML5 Uploader related scripts.

You can do it as follows:

<head>      
 <link href="../Scripts/css/aurigma.htmluploader.control.css"  
       rel="stylesheet" type="text/css" />      
 <script src="../Scripts/aurigma.imageuploaderflash.min.js"  
         type="text/javascript"></script>      
 <script src="../Scripts/aurigma.htmluploader.control.js"  
         type="text/javascript"></script>      
</head>

Now we are ready to embed the uploader to the page. Upload Suite includes a JavaScript object called $au.imageUploaderFlash. To insert the uploader, you should:

Create $au.imageUploaderFlash instance.
Pass uploader settings as JSON into it.
Embed the uploader to the page calling the writeHtml method. Or, you can use getHtml method to append the uploader HTML to the necessary element.

It looks like this:

<script type="text/javascript">      
 var uploader = $au.imageUploaderFlash({      
  id: 'Uploader1',      
  type: 'html|flash',      
  licenseKey: 'XXXXX-XXXXX-XXXXX-XXXXX-XXXXX-XXXXXX',      
  width: '100%',      
  height: '500px',      
  converters: [      
   { mode: '*.*=SourceFile' }      
  ],      
  uploadSettings: {      
   actionUrl: 'Upload.asp',      
   redirectUrl: 'Gallery.asp'      
  },      
  flashControl: {      
   codeBase: '../Scripts/aurigma.imageuploaderflash.swf',      
   bgColor: '#f5f5f5'      
  }      
 });      
 uploader.writeHtml();  </script>

Here are some comments about the uploader settings:

type — specifies whether you want to use HTML5, Flash or both. Typically, the default value is fine, but you can change if you need more control.
licenseKey — you should either use a trial license key or insert a full license key received upon the purchase. You may omit it for localhost.
converters — defines whether it is necessary to do with files before the upload. In this code, uploader is configured to upload only original files.
uploadSettings.actionUrl — specifies the URL of the script where the POST request is sent. We will write this script a bit later.
uploadSettings.redirectUrl — tells the uploader what page to open when all files are successfully uploaded. Omit this param if you don't want to leave the page.
flashControl.codeBase — specifies where the Flash uploader binary is located. If you use some unusual location for the Scripts folder, don't forget to update it!

For more detailed explanation, please refer the documentation.

Inserting ActiveX/Java Uploader

Inserting ActiveX/Java uploader is very similar to the HTML5/Flash counterpart. The difference is that you should link other .js files:

aurigma.uploader.min.js — Java/ActiveX related scripts.
aurigma.uploader.installationprogress.min.js — optional module used to display some information until .cab or .jar file is downloaded and installed.

<head>      
 <script src="../Scripts/aurigma.uploader.min.js"  
         type="text/javascript"></script>      
 <script src="../Scripts/aurigma.uploader.installationprogress.min.js"  
         type="text/javascript"></script>      
</head>

To embed ActiveX/Java uploader, use $au.uploader object instead of $au.imageUploaderFlash:

<script type="text/javascript">      
 var uploader = $au.uploader({ 
  id: 'Uploader1', 
  type: 'activeX|java',      
  width: '100%',      
  height: '500px',      
  licenseKey: 'XXXXX-XXXXX-XXXXX-XXXXX-XXXXX-XXXXXX',      
  activeXControl: {      
   codeBase: '../Scripts/Uploader8.cab',      
   codeBase64: '../Scripts/Uploader8_x64.cab'      
  },      
  javaControl: {      
   codeBase: '../Scripts/Uploader8.jar'      
  },      
  uploadSettings: {      
   actionUrl: 'Upload.asp',      
   redirectUrl: 'Gallery.asp',      
  },      
  converters: [      
   { mode: '*.*=SourceFile' }      
  ]        
 });      
      
 var ip = $au.installationProgress(uploader);      
 ip.progressImageUrl('../Images/installation_progress.gif');      
 ip.progressCssClass('ip-progress');      
 ip.instructionsCssClass('ip-instructions');      
      
 uploader.writeHtml();  </script>

As you see, it is very similar to HTML5/Flash, however there are few differences:

activeXControl and javaControl codebases — specify from where to download the .cab and .jar files. Make sure that these URLs are valid.
$au.installationProgress object — connects the installation progress with the uploader. Optional.
type — likewise to HTML5/Flash, it tells whether to use ActiveX or Java part. Note, ActiveX works only in IE. If you turn it off, Java will be loaded there.

Processing the uploaded files on server

Now it is a time to write a server-side upload processing code. If you ever dealt with a regular Browse button uploader, you should familiar to it.

Let's see how to do it using the Persits component (aspupload.com).

<%@  language="VBScript" %>      
<%      
  Set Upload = Server.CreateObject("Persits.Upload")      
  Upload.CodePage = 65001 'UTF8      
  Upload.Save "c:\temp\persits"      
%>

You can create more complicated scripts - if you omit a path where to save files in the Save method, it will save uploaded files in memory. You will be able to use Upload.Form collection to extract files and other data sent by the uploader. Refer list of POST fields sent by Aurigma for more details.

Code Examples

You can find some classic ASP sample applications in the Upload Suite package. Typically, it is available here:

C:\Program Files (x86)\Aurigma\Upload Suite [version number]\HTML5-Flash\ASP — for HTML5/Flash uploader.
C:\Program Files (x86)\Aurigma\Upload Suite [version number]\ActiveX-Java\ASP — for ActiveX/Java uploader.

Get a free 30-day trial

Upload Suite includes premium uploaders based on various technologies (HTML5, Flash, Java, ActiveX) for any server technology – ASP.NET and PHP, classic ASP and JSP, Ruby-on-rails and node.js.