Handling Upload Completion

When users upload files using a standard <input type="file"> element, they expect to be redirected to the page to which they have submitted files. However, ActiveX/Java Uploader works differently. The response generated by the page, which is specified with the UploadSettings.ActionUrlActionUrl (ASP.NET)ActionUrl (PHP)actionUrl (JavaScript) property, is sent back to ActiveX/Java Uploader and not to the browser. In other words, it works as follows:

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

What will happen on the last step depends on the settings. By default, no action would be carried out. This is convenient when ActiveX/Java Uploader is inserted into a pop-up window and you would like it to open in the background.

Another popular behavior is to redirect a user to another page which, for example, displays uploaded files. The simplest way to accomplish this is to use the UploadSettings.RedirectUrlRedirectUrl (ASP.NET)RedirectUrl (PHP)redirectUrl (JavaScript) property:

ASP.NET
<aur:Uploader ID="Uploader1" runat="server">
    <UploadSettings ActionUrl="upload.aspx" 
        RedirectUrl="gallery.aspx" />
</aur:Uploader>
PHP
$uploader = new Uploader("Uploader1");
$uploader->getUploadSettings()->setActionUrl("upload.php");
$uploader->getUploadSettings()->setRedirectUrl("gallery.php");
JavaScript
var u = $au.uploader({
    id: 'Uploader1',
    uploadSettings: { actionUrl: 'upload.aspx', redirectUrl: 'gallery.aspx' }
});

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 using it you can perform any actions allowed in client-side scripting. For instance, you can specify another way of redirecting a user:

JavaScript
function afterUploadHandler(response) {
    window.location = "gallery.aspx";
}

var u = $au.uploader({ 
    id: 'Uploader1',
    events: { afterUpload: afterUploadHandler }
});

You can also get access to the server response returned from the upload processing script. Here we demonstrate how to display a page returned from a server:

JavaScript
function afterUploadHandler(response) {
    var newWindow = window.open();
    with (newWindow.document) {
        open("text/html");
        write(response);
        close();
    }
}

var u = $au.uploader({ 
    id: 'Uploader1',
    events: { afterUpload: afterUploadHandler }
});

See Also

Reference