Aurigma Image Uploader 5.8 Dual
Handling Upload Completion
See Also

When users upload files using the standard <input type="file"> element, they expect to be redirected to the page they've submitted files to. However, Image Uploader works in a different way. The response generated by the page, which is specified with the Action property, is sent back to Image Uploader rather than to the browser. You should decide yourself what to do with this response.

The following figure demonstrates the comment above:

1. Image Uploader submits files to the server using POST requests.
2. The server script specified with the Action property processes uploaded files and sends some HTML back to Image Uploader.
3. As soon as Image Uploader receives the response, the upload is considered completed. Now, the response should be handled somehow.

What will actually happen on the last step depends on you. First of all, no action can be taken. This is convenient when Image Uploader is inserted into a pop-up window and you would like to have it opened in the background.

Another popular behavior is to redirect the user to another page which, for example, displays just uploaded files. The simplest way to accomplish this is to use the RedirectUrl property:

JavaScript | Copy Code
--- | ---
    <script type="text/javascript" src="iuembed.js"></script>

    <script type="text/javascript">
    var iu = new ImageUploaderWriter("ImageUploader", 710, 500);

    //...Any other params...

    iu.addParam("Action", "upload.aspx");
    iu.addParam("RedirectUrl", "gallery.aspx");

    //...

    iu.writeHtml();
    </script>

A more complicated, but more flexible way of handling the server response is to use the AfterUpload event. It is raised upon successful upload, and with it you can perform any actions allowed in client-side scripting. For example, you may specify another way of redirecting the user:

JavaScript | Copy Code
--- | ---
    <script type="text/javascript" src="iuembed.js"></script>

    <script type="text/javascript">
    function ImageUploader_AfterUpload(Html)
    {
        //We redirect to galery.aspx page when upload process is completed
        window.location = "gallery.aspx";
    }

    var iu = new ImageUploaderWriter("ImageUploader", 710, 500);

    //...Any other params or event handlers...

    iu.addEventListener("AfterUpload", "ImageUploader_AfterUpload");

    //...

    iu.writeHtml();
    </script>

Or you can get access to the server response returned from the Action script. Here we demonstrate how to display a page returned from the server:

JavaScript | Copy Code
--- | ---
    <script type="text/javascript" src="iuembed.js"></script>

    <script type="text/javascript">
    function ImageUploader_AfterUpload(Html)
    {
        var newWindow = window.open();
        with (newWindow.document) {
            open("text/html");
            write(Html);
            close();
        }
    }

    var iu = new ImageUploaderWriter("ImageUploader", 710, 500);

    //...Any other params or event handlers...

    iu.addEventListener("AfterUpload", "ImageUploader_AfterUpload");

    //...

    iu.writeHtml();
    </script>

The same functionality can be implemented using the Progress event. Here is how you can implement redirection:

JavaScript | Copy Code
--- | ---
    <script type="text/javascript" src="iuembed.js"></script>

    <script type="text/javascript">
    function ImageUploader_Progress(Status, Progress, ValueMax, Value, StatusText)
    {
        if (Status=="COMPLETE"){
            //We redirect to galery.aspx page when upload process is completed
            window.location = "gallery.aspx";
        }
    }

    var iu = new ImageUploaderWriter("ImageUploader", 710, 500);

    //...Any other params or event handlers...

    iu.addEventListener("Progress", "ImageUploader_Progress");

    //...

    iu.writeHtml();
    </script>

And this is how you can read the response from the Action URL:

JavaScript | Copy Code
--- | ---
    <script type="text/javascript" src="iuembed.js"></script>

    <script type="text/javascript">
    function ImageUploader_Progress(Status, Progress, ValueMax, Value, StatusText)
    {
        if (Status=="COMPLETE") {
            var newWindow = window.open();
               with (newWindow.document) {
                   open("text/html");
                   //When Status is "COMPLETE" we receive the server response in StatusText
                   write(StatusText);
                   close();
               }
        }
    }

    var iu = new ImageUploaderWriter("ImageUploader", 710, 500);

    //...Any other params or event handlers...

    iu.addEventListener("Progress", "ImageUploader_Progress");

    //...

    iu.writeHtml();
    </script>

Note
It is more preferable to use the AfterUpload event to handle successful upload.

# See Also

##### Reference

AfterUpload Event
Progress Event
Action Property
RedirectUrl Property

##### Manual

Adding a Custom Progress Bar