--- title: "Upgrading from ActiveX/Java Uploader 6 in JavaScript" canonical: https://www.aurigma.com/docs/us8/upgrading-from-iu-6-javascript.htm product: "Upload Suite 8" --- # Upgrading from ActiveX/Java Uploader 6 in JavaScript This topic highlights major API changes between versions 6 and 8 of ActiveX/Java Uploader and illustrates how to migrate a Web site to new version of the product. ActiveX/Java Uploader 8 has new client-side API: - New client API utilizes [JSON↗](http://json.org/) notation to configure ActiveX/Java Uploader client-side instead of **addParam** methods. - JavaScript object model became more comprehensive. The [Changes in ActiveX/Java Uploader JavaScript API between Versions 6 and 8](https://www.aurigma.com/docs/us8/api-changes-between-iu-6-and-8-javascript.htm.md) topic provides a list of API changes between ActiveX/Java Uploader 6 and 8 versions. In this topic we will create two small Web sites where users can upload images using ActiveX/Java Uploader 6 and 8. The applications will have similar functionality, and we will see how to implement the same set of features using both uploaders and what the differences between them are. Here is the list of ActiveX/Java Uploader features coming into play in our sample applications: - creating ActiveX/Java Uploader instance - applying license key - defining private-label-specific settings - customizing pane layout and buttons - specifying action and redirect URLs - preprocessing files before upload - watermarking thumbnails - defining quality meter - handling client-side events - rendering ActiveX/Java Uploader control - changing thumbnail settings at run-time ## Creating ActiveX/Java Uploader Instance To embed ActiveX/Java Uploader in a web page you have to create an [uploader](https://www.aurigma.com/docs/us8/JA_T_J_$au_uploader.htm.md) class instance and specify its identifier via the [id](https://www.aurigma.com/docs/us8/JA_P_J_$au_uploader_id.htm.md) parameter as follows: ``` var u = $au.uploader({ id: 'Uploader1', //... }); ``` ## Applying License Key As you can see from the code snippet below, format of license keys has changed in ActiveX/Java Uploader 8. License key(s) are set through the [uploader.licenseKey](https://www.aurigma.com/docs/us8/JA_P_J_$au_uploader_licenseKey.htm.md) property, if you have several keys, they should be separated with semicolons. Take into account that now ActiveX/Java Uploader Express does not allow to specify multiple license keys, if you need to specify several ones, you need to upgrade your edition. ``` var u = $au.uploader({ //... licenseKey: 'XXXXX-XXXXX-XXXXX-XXXXX-XXXXX-XXXXXX;YYYYY-YYYYY-YYYYY-YYYYY-YYYYY-YYYYYY', //... }); ``` For more information about licensing see the [Registering ActiveX/Java Uploader](https://www.aurigma.com/docs/us8/registering-image-uploader.htm.md) topic. ## Defining Private-label-specific Settings If you use private-label version of ActiveX/Java Uploader you need to specify your custom ActiveX/Java Uploader `cab` and `jar` files, version number, Java class name, and ActiveX control CLSID and PROGID. Use the [activeXControl.codeBase](https://www.aurigma.com/docs/us8/JA_P_J_$au_activeXControl_codeBase.htm.md), [activeXControl.codeBase64](https://www.aurigma.com/docs/us8/JA_P_J_$au_activeXControl_codeBase64.htm.md), and [javaControl.codeBase](https://www.aurigma.com/docs/us8/JA_P_J_$au_javaControl_codeBase.htm.md) properties to setup URLs (absolute or relative) to `cab` and `jar` files respectively. Pay attention to the fact that in contrast to version 6 ActiveX/Java Uploader 8 requires filename in URLs specified in the **codeBase** properties. The minimum required version of ActiveX/Java Uploader control can be set using the [javaControl.version](https://www.aurigma.com/docs/us8/JA_P_J_$au_javaControl_version.htm.md) and [activeXControl.version](https://www.aurigma.com/docs/us8/JA_P_J_$au_activeXControl_version.htm.md) properties. To customize Java class name use the [javaControl.className](https://www.aurigma.com/docs/us8/JA_P_J_$au_javaControl_className.htm.md) property. ActiveX control CLSID and PROGID you can set via the [activeXControl.classId](https://www.aurigma.com/docs/us8/JA_P_J_$au_activeXControl_classId.htm.md) and [activeXControl.progId](https://www.aurigma.com/docs/us8/JA_P_J_$au_activeXControl_progId.htm.md) respectively. **Important** All the information you need to specify using these properties will be provided to you by Aurigma, Inc. If some parameters were not sent, you should use default values. ``` var u = $au.uploader({ //... javaControl: {codeBase: 'Scripts/MyUploader7.jar', version: '7.0.11', className: 'com.mycompany.myuploader.MyUploader.class'}, activeXControl: {codeBase: 'Scripts/MyUploader7.cab', codeBase64: 'Scripts/MyUploader7_x64.cab', version: '7.0.11', progId: 'MyCompany.MyUploader', classId: 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX'}, //... }); ``` For more information see the [Using Private-label Version of ActiveX/Java Uploader JavaScript](https://www.aurigma.com/docs/us8/using-private-label-version-of-image-uploader-javascript.htm.md) topic. ## Customizing User Interface User interface customization API has been changed in new version. Now every visual element is represented by a class in client API, and its settings are presented via properties of these classes. Find the complete list of properties aimed to customize user interface in the [Customizing Appearance in ActiveX/Java Uploader](https://www.aurigma.com/docs/us8/customizing-appearance-iu.htm.md) topic. ### Pane Layout Now instead of two- and three-pane layouts we have introduced one layout which combines benefits of both. The user can expand/collapse different panels: upload list and/or file tree can be hidden. One-pane layout is supported also, it has minimal "drop-box" user interface. Each pane is reproduced by corresponding object in API: [folderPane](https://www.aurigma.com/docs/us8/JA_P_J_$au_uploader_folderPane.htm.md), [treePane](https://www.aurigma.com/docs/us8/JA_P_J_$au_uploader_treePane.htm.md), [uploadPane](https://www.aurigma.com/docs/us8/JA_P_J_$au_uploader_uploadPane.htm.md). Panes settings can be customized through properties of these objects. Quick overview of new approaches in user interface can be found in the [Layouts](https://www.aurigma.com/docs/us8/layouts.htm.md) article. ### Custom Buttons As you know ActiveX/Java Uploader allows to change appearance of standard buttons for better integration with customers' Web sites. Button settings are specified through specially formatted strings containing information on where to find button icons, their dimensions, etc. The format of the string stays the same as in version 6. In our sample we will change appearance of the **Upload** button. ``` var u = $au.uploader({ //... //Set one-pane layout paneLayout: 'OnePane', //Define custom "Upload" button uploadButtonImageFormat: "Width=82;Height=25;UrlNormal='../Images/UploadNormal.png';" + "UrlNormalFocused='../Images/UploadNormalFocused.png';UrlHover='../Images/UploadHover.png';" + "UrlHoverFocused='../Images/UploadHoverFocused.png';UrlPressed='../Images/UploadPressed.png';" + "UrlDisabled='../Images/UploadDisabled.png'", //... }); ``` To customize buttons of [Image editor](https://www.aurigma.com/docs/us8/image-editor.htm.md) and [Description editor](https://www.aurigma.com/docs/us8/additional-controls-and-indicators.htm.md) use the properties of corresponding classes. ## Specifying Action URL and Redirect URL Specify an URL to a server page where ActiveX/Java Uploader posts all selected files via the [actionUrl](https://www.aurigma.com/docs/us8/JA_P_J_$au_uploadSettings_actionUrl.htm.md) property. That page should contain server code which saves files to necessary folders server-side. To redirect a user to another page after upload is successfully completed use the [redirectUrl](https://www.aurigma.com/docs/us8/JA_P_J_$au_uploadSettings_redirectUrl.htm.md) property. For more information see the [Configuring Common Upload Settings in ActiveX/Java Uploader](https://www.aurigma.com/docs/us8/configuring-common-upload-settings-iu.htm.md) topic. ``` var u = $au.uploader({ //... uploadSettings: {actionUrl: 'upload.aspx', redirectUrl: 'gallery.aspx'}, //... }); ``` ## Configuring Files to Upload New concept of *converters* were added to version 8. A [converter](https://www.aurigma.com/docs/us8/JA_T_J_$au_converter.htm.md) defines how ActiveX/Java Uploader preprocesses files client-side before upload. You can specify uploading original files, creating thumbnails of specified dimensions and quality, or ZIP format compression via the [converter.mode](https://www.aurigma.com/docs/us8/JA_P_J_$au_converter_mode.htm.md). The following code configures uploader to send original files: ``` var u = $au.uploader({ //... converters: [{ mode: '*.*=SourceFile'}], //... }); ``` For more information see the [Configuring Files to be Uploaded in ActiveX/Java Uploader](https://www.aurigma.com/docs/us8/configuring-files-to-be-uploaded-iu.htm.md) topic. ### Thumbnails To upload transformed (e.g. resized or watermarked) images you should specify a **converter** in `thumbnail` **mode**. Thumbnail parameters are specified through the set of **converter.thumbnailXXX** properties. The following sample illustrates how to configure a 120x120 thumbnail converter: ``` var u = $au.uploader({ //... converters: [{ mode: '*.*=Thumbnail', thumbnailWidth: 120, thumbnailHeight: 120}], //... }); ``` Often it is useful to upload a source file along with a thumbnail. You can do it by combining converters from the previous two samples, like this: ``` var u = $au.uploader({ //... converters: [ //Add sourceFile converter { mode: '*.*=SourceFile'}, //Add thumbnail converter { mode: '*.*=Thumbnail', thumbnailWidth: 120, thumbnailHeight: 120} ], //... }); ``` To know more see the [Uploading Images](https://www.aurigma.com/docs/us8/uploading-images-iu.htm.md) section. ### Watermarks Watermarks are specified through the [converter.thumbnailWatermark](https://www.aurigma.com/docs/us8/JA_P_J_$au_converter_thumbnailWatermark.htm.md) property and can be applied only to the converters which generate thumbnails. The following sample shows how to create a converter generating a watermarked thumbnail: ``` var u = $au.uploader({ //... converters: [{ mode: '*.*=Thumbnail', thumbnailWidth: 800, thumbnailHeight: 600, thumbnailJpegQuality: 80, thumbnailFitMode: 'Fit', //Configure watermark thumbnailWatermark: 'Opacity=100;ImageUrl=../Images/Watermark.png;' + 'ImageWidth=155;ImageHeight=30;Position=BottomRight;'}], //... }); ``` You can find a full review of ActiveX/Java Uploader watermarking capabilities in the [Applying Watermarks via ActiveX/Java Uploader](https://www.aurigma.com/docs/us8/applying-watermarks-iu.htm.md) article. ## Defining Quality Meter The quality meter is now represented by a separate class, [qualityMeter](https://www.aurigma.com/docs/us8/JA_T_J_$au_qualityMeter.htm.md). Quality indicators parameters are set using the [formats](https://www.aurigma.com/docs/us8/JA_P_J_$au_qualityMeter_formats.htm.md) property via specially formatted string. See the code snippet below illustrating how to adjust quality meter. ``` var u = $au.uploader({ //... paneItem: {qualityMeter: { formats: '4 x 6,1800,1200,1.5;5 x 7,2100,1500,1.5;' +'8 x 10,3000,2400,1.5;16 x 20,4000,3200,2;30 x 20,6000,4000,2'}}, //... }); ``` For more information see the [Using Quality Meter](https://www.aurigma.com/docs/us8/using-quality-meter.htm.md) topic. ## Modifying Application Behavior at Run-time ### Handling Client-side Events ActiveX/Java Uploader 8 exposes a number of JavaScript events which are fired on different uploader activities. This way, you can add additional logic to your Web page, and display custom progress bar, for example. As well, you can use events to modify ActiveX/Java Uploader settings at run-time based on selected files or user input. You can find the [complete list of client-side events](https://www.aurigma.com/docs/us8/JA_T_Events_Uploader.htm.md) in the reference. To set an event handler use the [uploader.events](https://www.aurigma.com/docs/us8/JA_P_J_$au_uploader_events.htm.md) property like follows: ``` var u = $au.uploader({ //... events: { beforeUpload: Uploader1_BeforeUpload }, //... }); ``` ### Changing Converter Settings at Run-time In our example we will examine how to reinitialize thumbnail settings at run-time. We subscribe to [BeforeUpload](https://www.aurigma.com/docs/us8/JA_E_Uploader_BeforeUpload.htm.md) event and add event handler function to the code. In the function we firstly find the appropriate thumbnail to modify. As you can see from code snippet below, we get access to converters by 0-based indices. Thus, we get the first of converters as follows: `$au.uploader('uploader1').converters().get(0)`, where `uploader1` is the **uploader.id**. After we got the converter, we change its settings. The following snippet changes thumbnail size at run-time according to paper size format chosen beforehand: ``` function Uploader1_BeforeUpload() { var size = paperSize.split('x'); var pixelWidth = size[1] * 300; var pixelHeight = size[0] * 300; //Get the second converter var converter = $au.uploader('uploader1').converters().get(1); //Specify thumbnail size converter.thumbnailWidth(pixelWidth); converter.thumbnailHeight(pixelHeight); } ``` ### Adding Converter at Run-time The previous paragraph shows how to change the existing converter, but sometimes there is a necessity to create a new one. For instance, if your Web site accepts thumbnails and you want to give a user an option to upload source image as well. In fact, the only difference from changing existing converter is that you should use [converters.add()](https://www.aurigma.com/docs/us8/JA_M_J_$au_converters_add.htm.md) method to create a new converter. After that you can access it via the [converters.get(Number)](https://www.aurigma.com/docs/us8/JA_M_J_$au_converters_get_1_add419ba.htm.md) method. The following **BeforeUpload** event handler adds the `SourceFile` converter: ``` function Uploader1_BeforeUpload() { if (uploadSourceFile){ //Add new converter uploader.converters().add(); //The "count" method returns the number of converters actually contained in the collection var convertersCount = uploader.converters().count(); //Get the newly created converter, which is the last in converters collection var converter = uploader.converters().get(convertersCount); //Specify converter mode converter.mode("*.*=SourceFile"); } } ``` For more information see the [Using JavaScript API](https://www.aurigma.com/docs/us8/using-javascript-api.htm.md) topic. ## Rendering ActiveX/Java Uploader Control After you configured ActiveX/Java Uploader control, use the [uploader.writeHtml()](https://www.aurigma.com/docs/us8/JA_M_J_$au_uploader_writeHtml.htm.md) method to render it, like follows: ``` ``` ## Complete Code of Application with ActiveX/Java Uploader 8 `index.html`: ``` ``` ## Complete Code of Application with ActiveX/Java Uploader 6.5 `index.html`: ``` ``` ## See Also ### Manual - [Changes in ActiveX/Java Uploader ASP.NET API between Versions 6 and 8](https://www.aurigma.com/docs/us8/api-changes-between-iu-6-and-8-aspnet.htm.md) - [Changes in ActiveX/Java Uploader PHP API between Versions 6 and 8](https://www.aurigma.com/docs/us8/api-changes-between-iu-6-and-8-php.htm.md) - [Registering ActiveX/Java Uploader](https://www.aurigma.com/docs/us8/registering-image-uploader.htm.md) - [Customizing Appearance in ActiveX/Java Uploader](https://www.aurigma.com/docs/us8/customizing-appearance-iu.htm.md) - [Layouts](https://www.aurigma.com/docs/us8/layouts.htm.md) - [Configuring Common Upload Settings in ActiveX/Java Uploader](https://www.aurigma.com/docs/us8/configuring-common-upload-settings-iu.htm.md) - [Configuring Files to be Uploaded in ActiveX/Java Uploader](https://www.aurigma.com/docs/us8/configuring-files-to-be-uploaded-iu.htm.md) - [Uploading Images](https://www.aurigma.com/docs/us8/uploading-images-iu.htm.md) - [Using Quality Meter](https://www.aurigma.com/docs/us8/using-quality-meter.htm.md) - [Using JavaScript API](https://www.aurigma.com/docs/us8/using-javascript-api.htm.md) - [Sending All Files at Once or in Several Parts in ActiveX/Java Uploader](https://www.aurigma.com/docs/us8/sending-all-files-at-once-or-in-several-parts.htm.md)