Using Client-Side Events (igUpload)

The igUpload control exposes a rich client-side API featuring a number of events. There are seven different client-side events, which are fired either while the user is interacting with the control or during the upload process.

This topic demonstrates how to attach to client-side event handlers to igUpload using basic jQuery version as well as using the Ignite UI for MVC Upload. Further, this document details the associated event arguments as well as describing each event.

Attach to Client-Side Event in jQuery

When the basic igUpload jQuery widget is used, the handlers to the events are defined the same way as a jQuery UI option.

For example consider the fileSelecting event, which is described later in Client Events section of this document. The name of the event is used as a key and the value should be the handler that will implement the logic.

In jQuery:

$(window).load(function () {
    $("#igUpload1").igUpload({
        autostartupload: true,
        fileSelecting: function (e, args) {
        }
    });
});

Attach to Client-Side Event Using the Ignite UI for MVC

By default the Ignite UI for MVC don’t support defining the event handlers in the context of the MVC Helper syntax. Event binding is again set up using jQuery.

1. First, instantiate an instance of the Ignite UI for MVC Upload.

   In ASPX:

   <%= Html.Infragistics().Upload()
       .ID("igUpload1")
       .AutoStartUpload(true)
       .ProgressUrl("/IGUploadStatusHandler.ashx")
       .Render()
   %>
   

2. Then, using the jQuery bind() function, associate the event handler to the event.

   In jQuery:

   $(window).load(function () {
       $("#igUpload1").bind({ iguploadfileselecting: function (e, args) {    }});});
   

   Note: The name of the event now is combination of control name plus event name. This is jQuery UI convention for attaching handler to an event. For more information, please read: jQuery UI Developer Guide

3. Inside the attached handler you can implement any necessary logic. For this you can use the attributes of the event, which is named the same for all the events - e for the event, args for the arguments. Depending on the event, the args arguments contains a different set of properties.

   Note: Remember that if you want to cancel an event (cancellable events are fileSelecting and fileUploading) you just need to return false from the function.

This sample demonstrates how to utilize the igUpload's events and methods:

Client Events

Table 1 details the events available for the igUpload control.

Table 1: Client events available from the igUpload control

The following tables map the message codes returned from the server with their meanings.

Table 2: Enumeration of type UploadStatus

Table 3: Enumeration of type FileError (for server side error)

Table 4: Enumeration of type FileError (for client side error codes)

Related Links

• Ignite UI for jQuery Overview
• Using JavaScript Resources in Ignite UI for jQuery