## Aurigma Image Uploader Flash 1.0

# Using Image Uploader Flash at Runtime

- Collapse All Sections
- See Also
- Language Filter ( all languages )

When creating an imageUploaderFlash JavaScript object, ASP.NET control, or PHP class, we obligatory set its identifier via the id property.

### JavaScript

    $au.imageUploaderFlash({
            id: 'Uploader1',
            // ...
        });

### ASP.NET

    <aur:ImageUploaderFlash ID="Uploader1" runat="server">
        <!-- ... -->
    </aur:ImageUploaderFlash>

### PHP

    $uploader = new ImageUploaderFlash();
    $uploader->setID("Uploader1");
    // ...

This identifier is used to refer to Image Uploader Flash at runtime and, thus, modify its parameters, call methods, and handle events through JavaScript. The code snippet below demonstrates how to get reference to the imageUploaderFlash instance.

### JavaScript

    var uploader = $au.imageUploaderFlash('Uploader1');

The following sections describe how to use Image Uploader Flash properties, methods, and events at runtime.

## Using Properties

To modify some Image Uploader Flash properties after initialization, you should get a reference to the imageUploaderFlash object as described above, and modify these properties. If you need to modify several properties at once you can either change them one by one or call the set(Object) method.

Note

Not all Image Uploader Flash properties can be modified at runtime. See Image Uploader Flash Embedding Scripts Library Reference for details.

The code sample below demonstrates how to implement a separate drop-down list containing available view modes. Here we change the listView.view property respectively to the selected option.

### JavaScript

    <select id="selectView" onchange="changeView()">
        <option value="Tiles" selected="selected">Tiles</option>
        <option value="Thumbnails">Thumbnails</option>
        <option value="Icons">Icons</option>
    </select>
    <br />
    <script type="text/javascript">
        function changeView(){
            var selectView = document.getElementById('selectView');
            var value = selectView.options[selectView.selectedIndex].value;
            $au.imageUploaderFlash('Uploader1').listView().view(value);
        }

        $au.imageUploaderFlash({
            id: 'Uploader1',
            flashControl: {codeBase: '../ClientScripts/aurigma.imageuploaderflash.swf'}
        });

        $au.imageUploaderFlash('Uploader1').writeHtml();
    </script>

## Using Methods

If you need to call Image Uploader Flash methods, you should do it in the same way as for properties: get a reference to the imageUploaderFlash and call the method you need.

To demonstrate how to call methods we implement a custom Send button which works in the same manner as the embedded one. When a user clicks it, we call the send() method which initiates the upload.

### JavaScript

    <script type="text/javascript">
        function send(){
            $au.imageUploaderFlash('Uploader1').send();
        }

        $au.imageUploaderFlash({
            id: 'Uploader1',
            flashControl: {codeBase: '../ClientScripts/aurigma.imageuploaderflash.swf'}
        });

        $au.imageUploaderFlash('Uploader1').writeHtml();
    </script>
    <br />
    <input type="button" value="send" onclick="send()" />

## Using Events

Image Uploader Flash exposes a number of events which are handled in JavaScript. These events are intended to trace interactions between the user and the control from the initialization to the upload completion.

Name | Parameters | Returns | Description
--- | --- | --- | ---
AfterUpload | response - HTML code of the page returned from the server-side upload script. | N/A | Fires after successful upload.
AfterPackageUpload | fileIndex - zero-based index of the package (i.e. request) inside the current upload session. response - HTML code of the page returned from the server-side upload script after processing a current package. | Boolean | Fires when the current package was uploaded successfully. If event handler returns false, the upload process stops and the Progress event is fired with error code 18.
BeforeUpload | N/A | Boolean | Fires when the upload is about to be started. If event handler returns false (or zero), the upload is cancelled. Otherwise, upload begins immediately after the event handler finishes. This makes the event handler convenient for validating additional data provided by user.
BeforePackageUpload | packageIndex - zero-based index of the package (i.e. request) inside the current upload session. | N/A | Fires when the current package is about to be uploaded.
InitComplete | N/A | N/A | Fires when Image Uploader Flash is completely created and initialized.
PreRender | N/A | N/A | Fires before the writeHtml() or getHtml() method is executed.
Progress | status - textual information indicating the current step of the upload. progress - degree of completion of the upload or preparation process (in per cents). valueMax - maximum value of the value argument for the current upload step. value - current value of the progress. statusText - textual information for the current step. | N/A | Indicates the progress of the upload. This event allows you to handle errors which can occur during the upload, display progress indicator directly in HTML code, detect when the upload is finished, etc. Find the possible status values and their descriptions in the table below. According to the value of the status parameter, the progress, valueMax, value, and statusText have different meanings.

The following table contains the detailed information about Progress event parameters and their meaning on different upload steps.

status | progress | valueMax | value | statusText
--- | --- | --- | --- | ---
START. The upload process has been started. | No meaningful value.
PREPARE. Data are being prepared for the upload (thumbnails are generated; request is being constructed, etc). The upload is not started yet. | Percentage of the whole upload process completion. | Number of files to be prepared in the current request. | Number of files in the current request that have already been prepared. | Name of the file which is currently being prepared.
UPLOAD. Data are being uploaded to the server. | Total size of data of the current request (in bytes). | Amount of bytes of the current request that have already been sent to the server. | Name of the file which is currently being uploaded to the server.
COMPLETE. The upload process has been successfully completed. | No meaningful value. | Response from the server which is returned by the page where files are uploaded.
CANCEL. The upload process is cancelled by a user. | No meaningful value.
ERROR. Some error occurred during the upload. | No meaningful value. | One of the error codes: 1 - number of selected files is less than the restrictions.minFileCount value; 2 - URL specified in the upload.actionUrl property was not found; 3 - URL specified in the upload.actionUrl property has an incorrect syntax; 4 - some server-side error occurred; 6 - size of the selected file exceeds the restrictions.maxFileSize value; 7 - number of selected files exceeds the restrictions.maxFileCount value; 8 - total size of selected files exceeds the restrictions.maxTotalSize value; 9 - upload was aborted by a user; 13 - trial period has expired; 18 - The upload was aborted from the AfterPackageUpload event handler (the handler returns false); 19 - image dimensions are too large. Image width or height exceeds the restrictions.maxImageWidth or restrictions.maxImageHeight value; 20 - image dimensions are too small. Image width or height is less than the restrictions.minImageWidth or restrictions.minImageHeight value; 21 - size of the selected file is less than the restrictions.minFileSize value; 0 - unknown error. | Response from the server which is returned by the page where files are uploaded.

### Adding Event Handlers

To add an event handler you need to write it in JavaScript:

### JavaScript

    <script type="text/javascript">
    function beforeUploadHandler() {
        // ... Your code
    }
    </script>

The following actions depend on the way used to embed Image Uploader Flash into your application.

In Image Uploader Flash embedding scripts library event handlers can be added using the imageUploaderFlash.events property of the events type. This class exposes a number of properties representing available events. Each property accepts a string containing a name of the handler for corresponding event or an array of handler names.

### JavaScript

    $au.imageUploaderFlash({
        id: 'Uploader1',
        flashControl: {codeBase: '../ClientScripts/aurigma.imageuploaderflash.swf'},
        events: {
            beforeUpload: beforeUploadHandler,
            afterUpload: [afterUploadHandler1, afterUploadHandler2]
        }
    });

    $au.imageUploaderFlash('Uploader1').writeHtml();

Image Uploader Flash ASP.NET control allows configuring event handlers through the ImageUploaderFlash.ClientEvents property which accepts a set of ClientEvent instances. Each instance specifies the event name and name of the JavaScript function which will handle it. Names of supported events are contained in the ClientEventNames enumeration.

### ASP.NET

    <aur:ImageUploaderFlash ID="Uploader1" runat="server">
        <ClientEvents>
            <aur:ClientEvent EventName="BeforeUpload" HandlerName="beforeUploadHandler" />
            <aur:ClientEvent EventName="AfterUpload" HandlerName="afterUploadHandler1" />
            <aur:ClientEvent EventName="AfterUpload" HandlerName="afterUploadHandler2" />
        </ClientEvents>
    </aur:ImageUploaderFlash>

If you use Image Uploader Flash PHP library add event handlers via the ImageUploaderFlash.ClientEvents property. By analogy with JavaScript library, this property type is ClientEvents which implements properties representing Image Uploader Flash events. Every property accepts a string containing a name of the handler for corresponding event or an array of handler names.

### PHP

    $uploader = new ImageUploaderFlash();
    $uploader->setID("Uploader1");

    $uploader->getClientEvents()->setBeforeUpload("beforeUploadHandler");
    $uploader->getClientEvents()->setAfterUpload(array("afterUploadHandler1", "afterUploadHandler2"));

    $uploader->render();

### Removing Event Handlers

Event handlers can be removed at runtime only, thus to remove previously added beforeUploadHandler just execute the following code:

### JavaScript

    $au.imageUploaderFlash('Uploader1').events().beforeUpload().remove(beforeUploadHandler);

### Example

The following code sample demonstrates how to use the BeforeUpload event to configure a converter at runtime. Here a user can specify what should be uploaded for each original image - the image as is or its downsized copy. Additionally, this code handles all possible errors which can be occurred during Image Uploader Flash work.

### JavaScript

    <select id="selectSize">
        <option value="original" selected="selected">original</option>
        <option value="100x100">100x100</option>
        <option value="320x240">320x240</option>
        <option value="640x480">640x480</option>
        <option value="800x600">800x600</option>
        <option value="1024x768">1024x768</option>
        <option value="1280x1024">1280x1024</option>
        <option value="1600x1200">1600x1200</option>
    </select>
    <br />
    <script type="text/javascript">
        function beforeUpload() {
            var selectSize = document.getElementById('selectSize');
            var value = selectSize.options[selectSize.selectedIndex].value;
            var converter = $au.imageUploaderFlash('Uploader1').converters().get(0);
            if (value == "original") {
                converter.mode("*.*=SourceFile");
            } else {
                value = value.split("x");
                var width = parseInt(value[0]);
                var height = parseInt(value[1]);

                converter.set({mode: "*.*=Thumbnail", thumbnailWidth: width, thumbnailHeight: height});
            }
        }

        function progress(status, progress, valueMax, value, statusText){
            if (status == "ERROR"){
                alert(value + "\n" + statusText);
            }
        }

        $au.imageUploaderFlash({
            id: 'Uploader1',
            flashControl: {codeBase: '../ClientScripts/aurigma.imageuploaderflash.swf'},
            converters: [{mode: '*.*=SourceFile'}],
            events: {beforeUpload: [beforeUpload], progress: [progress]}
        });

        $au.imageUploaderFlash('Uploader1').writeHtml();
    </script>

## See Also

### Reference

- events.afterPackageUpload Property
- events.afterUpload Property
- events.beforePackageUpload Property
- events.beforeUpload Property
- events.initComplete Property
- events.preRender Property
- events.progress Property

### Manual

- Quick Start with ASP.NET Control
- Quick Start with PHP Library
- Quick Start with Embedding Scripts Library
- Configuring Upload Settings

- ImageUploaderFlash (ASP.NET)
- ImageUploaderFlash (PHP)
- imageUploaderFlash (Java Script)

- ID (PHP)
- id (Java Script)

- MinFileCount (ASP.NET)
- MinFileCount (PHP)
- minFileCount (Java Script)

- ActionUrl (ASP.NET)
- ActionUrl (PHP)
- actionUrl (Java Script)

- ActionUrl (ASP.NET)
- ActionUrl (PHP)
- actionUrl (Java Script)

- MaxFileSize (ASP.NET)
- MaxFileSize (PHP)
- maxFileSize (Java Script)

- MaxFileCount (ASP.NET)
- MaxFileCount (PHP)
- maxFileCount (Java Script)

- MaxTotalSize (ASP.NET)
- MaxTotalSize (PHP)
- maxTotalSize (Java Script)

- MaxImageWidth (ASP.NET)
- MaxImageWidth (PHP)
- maxImageWidth (Java Script)

- MaxImageHeight (ASP.NET)
- MaxImageHeight (PHP)
- maxImageHeight (Java Script)

- MinImageWidth (ASP.NET)
- MinImageWidth (PHP)
- minImageWidth (Java Script)

- MinImageHeight (ASP.NET)
- MinImageHeight (PHP)
- minImageHeight (Java Script)

- MinFileSize (ASP.NET)
- MinFileSize (PHP)
- minFileSize (Java Script)

- AfterPackageUpload (PHP)
- afterPackageUpload (Java Script)

- AfterUpload (PHP)
- afterUpload (Java Script)

- BeforePackageUpload (PHP)
- beforePackageUpload (Java Script)

- BeforeUpload (PHP)
- beforeUpload (Java Script)

- InitComplete (PHP)
- initComplete (Java Script)

- PreRender (PHP)
- preRender (Java Script)

- Progress (PHP)
- progress (Java Script)