This product was discontinued

Other platforms

Upload Suite is a really server platform independent platform. You can add the upload functionality to your site no matter what technology you use. Let's see how you can do it.

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.

The server-side part won't be much different comparing to writing a code for a regular old good HTML Browse button. Upload Suite sends files as a standard HTTP POST request as multipart/form-data (RFC 1867).

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.

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: 'UploadPage.html',      
   redirectUrl: 'Gallery.html'      
  },      
  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: 'UploadPage.html',      
   redirectUrl: 'Gallery.html',      
  },      
  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

Upload Suite sends files as a POST request. Your code should parse it, extract POST fields and process them correspondingly. If you ever dealt with a regular Browse button uploader, you should familiar to it.

As usual, all you need is to understand how many files are uploaded and then iterate through all files and save them to disk. The file count is sent in the PackageFileCount POST field and files are sent as File0_0, File0_1, File0_2, etc. If you use multiple converters, the first index will be increased (like File0_0 for the first file produced by the first converter and File1_0 for the same file produced with the second converter.

Upload Suite also sends a lot of other fields. Refer list of POST fields sent by Aurigma for more details.

Code Examples

If you are familiar with one of these technologies, feel free to check out these sections for some examples or download the Upload Suite package:

If you need some code examples for a technology which is not included to this list, feel free to contact us.

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.