1. ActiveX/Java Uploader 8.5.81
  2. ActiveX/Java Uploader
  3. Getting Started
  4. ActiveX/Java Uploader JavaScript

Quick Start with ActiveX/Java Uploader JavaScript

ActiveX/Java Uploader JavaScript is a set of JavaScript classes intended to embed ActiveX/Java Uploader into a web page via <script type="text/javascript"> block. This JavaScript (aurigma.uploader.js) is a base for ActiveX/Java Uploader ASP.NET and ActiveX/Java Uploader PHP. Using the JavaScript library is more complicated: it requires configuring ActiveX/Java Uploader parameters manually and does not provide facilities to handle uploaded data server-side. However, it is more flexible and can be used with any HTTP-compliant server platform (not only ASP.NET or PHP).

Adding ActiveX/Java Uploader to Page

To add ActiveX/Java Uploader to the page you just need to perform the following steps:

  1. Copy the /Scripts folder to your web application. It can be found in ActiveX/Java Uploader installation folder (usually this is C:\Program Files\Aurigma\Upload Suite 8.5.81\ActiveX-Java\Scripts).

  2. Link the aurigma.uploader.js file with the page which will host ActiveX/Java Uploader.

    JavaScript
    <script type="text/javascript" src="Scripts/aurigma.uploader.js"></script>

  3. Add the following JavaScript code at the position where you want to insert ActiveX/Java Uploader. Here we create a new uploader instance with "Uploader1" id.

    JavaScript
    <script type="text/javascript">
var u = $au.uploader({
    id: 'Uploader1'
    
    // configure ActiveX/Java Uploader    
    
});

u.writeHtml();
</script>

    If you copy the /Scripts folder to somewhere else than to the root of your website, you should manually set paths to CAB and JAR files in the script:

    JavaScript
    <script type="text/javascript">
var u = $au.uploader({
    id: 'Uploader1',
    activeXControl: {
        codeBase: 'Scripts/UploaderSuite/Uploader8.cab',
        codeBase64: 'Scripts/UploaderSuite/Uploader8_x64.cab'
    },
    javaControl: {
        codeBase: 'Scripts/UploaderSuite/Uploader8.jar'
    }
        
    // configure ActiveX/Java Uploader    
    
});

u.writeHtml();
</script>

  4. Then configure it in the way described in the following sections and call the uploader.writeHtml() method.

    Note:

    As soon as you call the uploader.writeHtml(), all necessary HTML code is inserted into the page at the current position. Alternatively, you can get the string with appropriate HTML code using the uploader.getHtml() method, and write it to the necessary position manually (maybe with some modifications).

Uploading Files

Here we discuss the use ActiveX/Java Uploader JavaScript by the example of a simple file catalog. Suppose that the catalog requires a user to upload files of various types and displays links to download these files. To implement this we should configure an uploader object and save uploaded files on a server. The sections below describe these steps in detail.

Configuring

To configure ActiveX/Java Uploader you should set properties of the uploader object. See the ActiveX/Java Uploader JavaScript Reference for the detailed information about available properties.

The properties accepting objects (such us uploader.uploadSettings or uploader.converters) should be specified in JSON format. Using this format you can also initialize all the uploader properties when creating it. Moreover, you can use the uploader.set(Object) method which accepts a JSON formatted string containing one or several properties definition.

Here is the source code of the main page of our catalog:

JavaScript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>ActiveX/Java Uploader JavaScript Sample</title>
</head>
<body>
    <script type="text/javascript" src="Scripts/aurigma.uploader.js">  </script>
    <script type="text/javascript">
    var u = $au.uploader({
        id: 'Uploader1',
        width: '650px',
        height: '480px',
        licenseKey: 'XXXXX-XXXXX-XXXXX-XXXXX-XXXXX-XXXXXX;YYYYY-YYYYY-YYYYY-YYYYY-YYYYY-YYYYYY',
        converters: [
            { mode: '*.*=SourceFile' }
        ], 
        uploadSettings: {
            actionUrl: 'Upload.aspx',
            redirectUrl: 'Catalog.aspx'
        }
    });
    
    u.writeHtml();
    </script>    
</body>
</html>

On this page we set a mandatory parameter, ActiveX/Java Uploader identifier, as well as optional parameters required by our file catalog. Here we specify server upload script and a page to which a user will be redirected when the upload successfully completes. To configure ActiveX/Java Uploader to send original files we used the uploader.converters property which accepts an array of converter objects. Each object specifies what will be uploaded (original file as is, thumbnail created from original image file, icon associated with original file, or original file compressed into ZIP archive) for each of the user-selected files. Since we need to upload only the original files, we set one converter with the SourceFile mode. Read more about converters in the Configuring Files to be Uploaded in ActiveX/Java Uploader topic.

One more significant property is uploader.licenseKey which specifies trial or full license key. If license key is not set ActiveX/Java Uploader will not send files (the exception is usage of uploader on localhost domain). See the Registering ActiveX/Java Uploader topic for details.

Handling Upload

According to the catalog requirements, we save original files to the /Catalog folder. The way to implement it depends on your server platform. Find the detailed instructions and code samples on how to save uploaded files in the Saving Uploaded Files in ActiveX/Java Uploader ASP.NET and Saving Uploaded Files in ActiveX/Java Uploader PHP articles.

Displaying Uploaded Files

On the configuring step we set the uploadSettings.redirectUrl property. It specifies a page to which ActiveX/Java Uploader will redirect users after the upload is successfully completed. It would be convenient to list links to the uploaded files here. To implement this functionality we iterate through all the files stored in the /Catalog folder and display a link to each of them.

The script which generates this page depends on your server platform. For example, if you save uploaded files in ASP.NET, you can use the script listed in the Quick Start with ActiveX/Java Uploader ASP.NET topic. For PHP platform use the analogue from the Quick Start with ActiveX/Java Uploader PHP article.

Uploading Images

One more example of ActiveX/Java Uploader usage is an image gallery. Suppose, it requires a user to upload original images along with their downsized copies. This task can be divided into the same phases as the previous one.

Configuring

The configuration of the uploader object used for our image gallery is almost the same as for the file catalog described above.

JavaScript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>ActiveX/Java Uploader JavaScript Sample</title>
</head>
<body>
    <script type="text/javascript" src="Scripts/aurigma.uploader.js">  </script>
    <script type="text/javascript">
    var u = $au.uploader({
        id: 'Uploader1',
        width: '650px',
        height: '480px',
        licenseKey: 'XXXXX-XXXXX-XXXXX-XXXXX-XXXXX-XXXXXX;YYYYY-YYYYY-YYYYY-YYYYY-YYYYY-YYYYYY',
        converters: [
            { mode: '*.*=SourceFile' },
            { mode: '*.*=Thumbnail;*.*=Icon', thumbnailFitMode: 'Fit', thumbnailWidth: '120', thumbnailHeight: '120' }
        ], 
        uploadSettings: {
            actionUrl: 'Upload.aspx',
            redirectUrl: 'Gallery.aspx'
        }
    });
    
    u.writeHtml();
    </script>    
</body>
</html>

The difference is that we set an additional converter to specify a thumbnail which will be created for each image file and will be fitted to 120x120 pixels. For non-image files this converter will send icons. Read more about converters in the Configuring Files to be Uploaded in ActiveX/Java Uploader topic.

Handling Upload

The gallery stores original images and their thumbnails in /Gallery and /Gallery/Thumbnails folders respectively. The way to implement it depends on your server platform. Find the detailed instructions and code samples on how to save uploaded files in the Saving Uploaded Files in ActiveX/Java Uploader ASP.NET and Saving Uploaded Files in ActiveX/Java Uploader PHP articles.

Displaying Uploaded Files

On the configuring step we set the uploadSettings.redirectUrl property. It specifies a page to which ActiveX/Java Uploader will redirect users after the upload is successfully completed. It would be convenient to display uploaded files here. To implement this functionality we iterate through all the previews stored in the /Gallery/Thumbnails folder and display each thumbnail as a link to its original image (original images are stored in the /Gallery folder).

The script which generates this page depends on your server platform. For example, if you save uploaded files in ASP.NET, you can use the script listed in the Quick Start with ActiveX/Java Uploader ASP.NET topic. For PHP platform use the analogue from the Quick Start with ActiveX/Java Uploader PHP article.

See Also

Reference

Manual