---
title: "Quick Start with HTML5/Flash Uploader JavaScript"
canonical: https://www.aurigma.com/docs/us8/quick-start-with-image-uploader-flash-javascript.htm
product: "Upload Suite 8"
---

# Quick Start with HTML5/Flash Uploader JavaScript

Supported technologies: ![Adobe Flash](https://www.aurigma.com/docs/us8/icons/flash.png)![HTML 5](https://www.aurigma.com/docs/us8/icons/html5.png)
 
HTML5/Flash Uploader JavaScript is a set of JavaScript classes intended to embed HTML5/Flash Uploader into a web page via `<script type="text/javascript">` block. This JavaScript (`aurigma.imageuploaderflash.js`) is a base for HTML5/Flash Uploader ASP.NET and HTML5/Flash Uploader PHP. Using the JavaScript library is more complicated: it requires configuring HTML5/Flash 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 HTML5/Flash Uploader to Page
 
To add HTML5/Flash 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 HTML5/Flash Uploader installation folder (usually this is `C:\Program Files\Aurigma\Upload Suite 8.5.81\HTML5-Flash\`).

**Note** 
It is recommended to use minified versions of HTML5/Flash Uploader JavaScript scripts in production environment in order to preserve bandwidth. These files support the same functions as usual HTML5/Flash Uploader JavaScript, but have been optimized in size. The minified versions contain `.min.js` in their filenames.
2. Link the `aurigma.imageuploaderflash.js`, `aurigma.htmluploader.control.js`, and `aurigma.htmluploader.control.css` files with the page which will host HTML5/Flash Uploader.
 ```
    <script type="text/javascript" src="Scripts/aurigma.imageuploaderflash.js">  </script>
    <script type="text/javascript" src="Scripts/aurigma.htmluploader.control.js">  </script>
    <link rel="stylesheet" type="text/css" href="Scripts/css/aurigma.htmluploader.control.css" />
    ```
3. Add JavaScript block to the position where you want to insert HTML5/Flash Uploader. Here create a new instance of the [imageUploaderFlash](https://www.aurigma.com/docs/us8/FH_T_J_$au_imageUploaderFlash.htm.md) class and specify its identifier via the [imageUploaderFlash.id](https://www.aurigma.com/docs/us8/FH_P_J_$au_imageUploaderFlash_id.htm.md) parameter.
 ```
    <script type="text/javascript">
        var u = $au.imageUploaderFlash({id: 'Uploader1'});
        
        // configure HTML5/Flash Uploader
    
        u.writeHtml();
    </script>        
    ```
4. Then configure it in the way described in the following sections and call the [imageUploaderFlash.writeHtml()](https://www.aurigma.com/docs/us8/FH_M_J_$au_imageUploaderFlash_writeHtml.htm.md) method.
 
**Note:** 
As soon as you call the **imageUploaderFlash.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 [imageUploaderFlash.getHtml()](https://www.aurigma.com/docs/us8/FH_M_J_$au_imageUploaderFlash_getHtml.htm.md) method, and write it to the necessary position manually (maybe with some modifications).

## Defining Uploader Type
 
By default, HTML5/Flash Uploader has HTML5 Uploader enabled. If a user opens a page in a HTML5-compliant browser (see [the supported browsers table](https://www.aurigma.com/docs/us8/before-you-started-iuf.htm.md)), HTML5 Uploader is displyed. Otherwise Flash Uploader comes up. You can change this behavior by defining upload technology in your application (you will need this customization if you plan to use one the features which are not supported by HTML5 Uploader). Use the [type](https://www.aurigma.com/docs/us8/FH_P_J_$au_imageUploaderFlash_type.htm.md) property to perform this. The property possible values are `"html|flash"` (default value), `"flash|html"`, `"html"`, and `"flash"`.
 
The following snippet configures HTML5/Flash Uploader to use the Flash control by default, and the HTML5 control if the client browser does not support flash:
 ```
var u = $au.imageUploaderFlash({
    id: 'Uploader1',
    type: 'flash|html'
});
u.writeHtml();
```

## Uploading Files
 
Here we discuss the use HTML5/Flash 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 **imageUploaderFlash** object and save uploaded files on a server. The sections below describe these steps in detail.
 
### Configuring
 
To configure HTML5/Flash Uploader you should set properties of the **imageUploaderFlash** object. See the [HTML5/Flash Uploader JavaScript Reference](https://www.aurigma.com/docs/us8/FH_R_J_Aurigma_ImageUploaderFlash.htm.md) for the detailed information about available properties.
 
The properties accepting objects (such us [imageUploaderFlash.upload()](https://www.aurigma.com/docs/us8/FH_M_J_$au_imageUploaderFlash_upload.htm.md) or [converters](https://www.aurigma.com/docs/us8/FH_P_J_$au_imageUploaderFlash_converters.htm.md)) should be specified in [JSON↗](http://json.org/) format. Using this format you can also initialize all the **imageUploaderFlash** properties when creating it. Moreover, you can use the [imageUploaderFlash.set(Object)](https://www.aurigma.com/docs/us8/FH_M_J_$au_imageUploaderFlash_set_1_8419e710.htm.md) 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:
 ```
<!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>Embedding Scripts Library Sample</title>
</head>
<body>
    <script type="text/javascript" src="Scripts/aurigma.imageuploaderflash.js">  </script>
    <script type="text/javascript" src="Scripts/aurigma.htmluploader.control.js">  </script>
    <link rel="stylesheet" type="text/css" href="Scripts/css/aurigma.htmluploader.control.css" />
    <script type="text/javascript">
        var u = $au.imageUploaderFlash({
            id: 'Uploader1',
            width: '650px',
            height: '480px',
            licenseKey: 'XXXXX-XXXXX-XXXXX-XXXXX-XXXXX-XXXXXX',
            converters: [
                { mode: '*.*=SourceFile' }
            ], 
            uploadSettings: {
                actionUrl: 'Upload.aspx',
                redirectUrl: 'Catalog.aspx'
            }
        });
        
        u.writeHtml();
    </script>
</body>
</html>
``` 
On this page we set mandatory parameters, such as HTML5/Flash Uploader identifier and path to the `aurigma.imageuploaderflash.swf` file, 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 HTML5/Flash Uploader to send original files we used the **imageUploaderFlash.converters** property which accepts an array of [converter](https://www.aurigma.com/docs/us8/FH_T_J_$au_converter.htm.md) 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 HTML5/Flash Uploader](https://www.aurigma.com/docs/us8/configuring-files-to-be-uploaded-iuf.htm.md) topic.
 
One more significant property is [imageUploaderFlash.licenseKey](https://www.aurigma.com/docs/us8/FH_P_J_$au_imageUploaderFlash_licenseKey.htm.md) which specifies trial or full license key. If license key is not set HTML5/Flash Uploader will not send files (the exception is usage of uploader on `localhost` domain). See the [Registering HTML5/Flash Uploader](https://www.aurigma.com/docs/us8/registering-image-uploader-flash.htm.md) 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 ASP.NET and PHP in the [Saving Uploaded Files in HTML5/Flash Uploader ASP.NET](https://www.aurigma.com/docs/us8/saving-uploaded-files-in-aspnet-iuf.htm.md) and [Saving Uploaded Files in HTML5/Flash Uploader PHP](https://www.aurigma.com/docs/us8/saving-uploaded-files-in-php-iuf.htm.md) articles.
 
### Displaying Uploaded Files
 
On the configuring step we set the [uploadSettings.redirectUrl](https://www.aurigma.com/docs/us8/FH_P_J_$au_uploadSettings_redirectUrl.htm.md) property. It specifies a page to which HTML5/Flash 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 HTML5/Flash Uploader ASP.NET](https://www.aurigma.com/docs/us8/quick-start-with-image-uploader-flash-aspnet.htm.md) topic. For PHP platform use the analogue from the [Quick Start with HTML5/Flash Uploader PHP](https://www.aurigma.com/docs/us8/quick-start-with-image-uploader-flash-php.htm.md) article.

## Uploading Images
 
One more example of HTML5/Flash 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 **imageUploaderFlash** object used for our image gallery is almost the same as for the file catalog described above.
 ```
<!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>Embedding Scripts Library Sample</title>
</head>
<body>
    <script type="text/javascript" src="Scripts/aurigma.imageuploaderflash.js">  </script>
    <script type="text/javascript" src="Scripts/aurigma.htmluploader.control.js">  </script>
    <link rel="stylesheet" type="text/css" href="Scripts/css/aurigma.htmluploader.control.css" />
    <script type="text/javascript">
        var u = $au.imageUploaderFlash({
            id: 'Uploader1',
            width: '650px',
            height: '480px',
            licenseKey: 'XXXXX-XXXXX-XXXXX-XXXXX-XXXXX-XXXXXX',
            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 HTML5/Flash Uploader](https://www.aurigma.com/docs/us8/configuring-files-to-be-uploaded-iuf.htm.md) 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 ASP.NET and PHP in the [Saving Uploaded Files in HTML5/Flash Uploader ASP.NET](https://www.aurigma.com/docs/us8/saving-uploaded-files-in-aspnet-iuf.htm.md) and [Saving Uploaded Files in HTML5/Flash Uploader PHP](https://www.aurigma.com/docs/us8/saving-uploaded-files-in-php-iuf.htm.md) articles.
 
### Displaying Uploaded Files
 
On the configuring step we set the **uploadSettings.redirectUrl** property. It specifies a page to which HTML5/Flash 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 HTML5/Flash Uploader ASP.NET](https://www.aurigma.com/docs/us8/quick-start-with-image-uploader-flash-aspnet.htm.md) topic. For PHP platform use the analogue from the [Quick Start with HTML5/Flash Uploader PHP](https://www.aurigma.com/docs/us8/quick-start-with-image-uploader-flash-php.htm.md) article.

## See Also
 
### Reference
 
- [HTML5/Flash Uploader JavaScript Reference](https://www.aurigma.com/docs/us8/FH_R_J_Aurigma_ImageUploaderFlash.htm.md)
- [imageUploaderFlash Class](https://www.aurigma.com/docs/us8/FH_T_J_$au_imageUploaderFlash.htm.md)

### Manual
 
- [Configuring Files to be Uploaded in HTML5/Flash Uploader](https://www.aurigma.com/docs/us8/configuring-files-to-be-uploaded-iuf.htm.md)
- [Registering HTML5/Flash Uploader](https://www.aurigma.com/docs/us8/registering-image-uploader-flash.htm.md)
- [Saving Uploaded Files in HTML5/Flash Uploader ASP.NET](https://www.aurigma.com/docs/us8/saving-uploaded-files-in-aspnet-iuf.htm.md)
- [Saving Uploaded Files in HTML5/Flash Uploader PHP](https://www.aurigma.com/docs/us8/saving-uploaded-files-in-php-iuf.htm.md)
- [Saving Uploaded Files via HTML5/Flash Uploader in Other Platforms](https://www.aurigma.com/docs/us8/saving-uploaded-files-in-other-platforms-iuf.htm.md)