ui.igUpload

ui.igUpload_image

The igUpload control is a jQuery file upload control for ASP.NET and ASP.NET MVC. The control supports multiple file uploads, progress notification, and cancellation. In addition to the client-side jQuery API, refer to the server-side API for information about server-side functionality. Further information regarding the classes, options, events, methods and themes of this API are available under the associated tabs above.

The following code snippet demonstrates how to initialize the igUpload control.

Click here for more information on how to get started using this API. For details on how to reference the required scripts and themes for the igUpload control read, Using JavaScript Resources in Ignite UI and Styling and Theming Ignite UI.

Code Sample

<!doctype html>
<html>
<head>
    <!-- Infragistics Combined CSS -->
    <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
    <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
    <!-- jQuery Core -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <!-- jQuery UI -->
    <script src="js/jquery-ui.js" type="text/javascript"></script>    
    <!-- Infragistics Combined Scripts -->
	<script src="js/infragistics.core.js" type="text/javascript"></script>
	<script src="js/infragistics.lob.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
    $(function () {
        $("#upload").igUpload({
            mode: "single",
            autostartupload: true,
            // to upload a file, you need a server-side handler
            progressUrl: "IGUploadStatusHandler.ashx",
            controlId: "serverID"
        });
    });
    </script>
</head>
<body>
	<div id="upload"></div>
</body>
</html>

Related Samples

Related Topics

Dependencies

jquery-1.9.1.js
jquery.ui.core.js
jquery.ui.widget.js
infragistics.util.js
infragistics.ui.shared.js

Inherits

  • allowedExtensions

    Type:
    array
    Default:
    []
    Elements Type:
    object

    Get or set file allowed file extensions. When this array is empty - it is not made such validation. Example ["gif", "jpg", "bmp"].

    Code Sample

     
				//Initialize
				$(".selector").igUpload({
					allowedExtensions : ["xls","doc"]
				});

				//Get
				var extensions = $(".selector").igUpload("option", "allowedExtensions");

				//Set
				$(".selector").igUpload("option", "allowedExtensions", ["xls","doc"]);

  • autostartupload

    Type:
    bool
    Default:
    false

    Get or set whether the file start upload automatically when it is selected. Default is false.

    Code Sample

     
				//Initialize
				$(".selector").igUpload({
					autostartupload : true
				});

				//Get
				var autoStart = $(".selector").igUpload("option", "autostartupload");

				//Set
				$(".selector").igUpload("option", "autostartupload", true);

  • controlId

    Type:
    string
    Default:
    ""

    UniqueId of the control - should not be changed by developer. Set from server-side wrapper.

    Code Sample

     
				//Initialize
				$(".selector").igUpload({
					controlId: "serverID1"
				});

  • css

    Type:
    object
    Default:
    null

    Get or set control specific CSS options. For example you can override specific control classes with custom ones.

    Code Sample

     
				//Initialize
				$(".selector").igUpload({
					css: {
						"uploadProgressClass": "customClass"
					}
				});

				//Get
				var css = $(".selector").igUpload("option", "css");

				//Set
				$(".selector").igUpload("option", "css", { "uploadProgressClass": "customClass" });

				<style type="text/css">
					.customHiddenClass { visibility: hidden; }
				</style>

  • errorMessageAJAXRequestFileSize

    Type:
    string
    Default:
    ""

    Get or set error message when AJAX Request to get file size throws error.

    Code Sample

     
				//Initialize
				$(".selector").igUpload({
					errorMessageAJAXRequestFileSize : "File must be smaller than 50 mb."
				});

				//Get
				var message = $(".selector").igUpload("option", "errorMessageAJAXRequestFileSize");

				//Set
				$(".selector").igUpload("option", "errorMessageAJAXRequestFileSize", "File must be smaller than 50 mb.");

  • errorMessageCancelUpload

    Type:
    string
    Default:
    ""

    Get or set error message when ajax call to send cancel upload command.

    Code Sample

     
				//Initialize
				$(".selector").igUpload({
					errorMessageCancelUpload : "Upload Cancelled"
				});

				//Get
				var message = $(".selector").igUpload("option", "errorMessageCancelUpload");

				//Set
				$(".selector").igUpload("option", "errorMessageCancelUpload", "Upload Cancelled");

  • errorMessageDropMultipleFilesWhenSingleModel

    Type:
    string
    Default:
    ""

    Get or set error message when trying to drop more than 1 file and mode is single.

  • errorMessageGetFileStatus

    Type:
    string
    Default:
    ""

    Get or set error message when ajax call to get file status throws error.

    Code Sample

     
				//Initialize
				$(".selector").igUpload({
					errorMessageGetFileStatus : "Unable to determine upload progress"
				});

				//Get
				var message = $(".selector").igUpload("option", "errorMessageGetFileStatus");

				//Set
				$(".selector").igUpload("option", "errorMessageGetFileStatus", "Unable to determine upload progress");

  • errorMessageMaxFileSizeExceeded

    Type:
    string
    Default:
    ""

    Get or set message shown when max file size of the uploaded file exceeds the limit.

    Code Sample

     
				//Initialize
				$(".selector").igUpload({
					errorMessageMaxFileSizeExceeded : "File must be smaller than 50 mb."
				});

				//Get
				var message = $(".selector").igUpload("option", "errorMessageMaxFileSizeExceeded");

				//Set
				$(".selector").igUpload("option", "errorMessageMaxFileSizeExceeded", "File must be smaller than 50 mb.");

  • errorMessageMaxSimultaneousFiles

    Type:
    string
    Default:
    ""

    Get or set error message when maximum simultaneous files is less or equal to 0.

    Code Sample

     
				//Initialize
				$(".selector").igUpload({
					errorMessageMaxSimultaneousFiles : "Can only upload 2 files at a time"
				});

				//Get
				var message = $(".selector").igUpload("option", "errorMessageMaxSimultaneousFiles");

				//Set
				$(".selector").igUpload("option", "errorMessageMaxSimultaneousFiles", "Can only upload 2 files at a time");

  • errorMessageMaxUploadedFiles

    Type:
    string
    Default:
    ""

    Get or set error message when maximum allowed files exceeded.

    Code Sample

     
				//Initialize
				$(".selector").igUpload({
					errorMessageMaxUploadedFiles : "File upload limit reached"
				});

				//Get
				var message = $(".selector").igUpload("option", "errorMessageMaxUploadedFiles");

				//Set
				$(".selector").igUpload("option", "errorMessageMaxUploadedFiles", "File upload limit reached");

  • errorMessageNoSuchFile

    Type:
    string
    Default:
    ""

    Get or set error message when file is not found.

    Code Sample

     
				//Initialize
				$(".selector").igUpload({
					errorMessageNoSuchFile : "File not found"
				});

				//Get
				var message = $(".selector").igUpload("option", "errorMessageNoSuchFile");

				//Set
				$(".selector").igUpload("option", "errorMessageNoSuchFile", "File not found");

  • errorMessageOther

    Type:
    string
    Default:
    ""

    Get or set error message different from the other messages.

    Code Sample

     
				//Initialize
				$(".selector").igUpload({
					errorMessageOther : "An error has occurred"
				});

				//Get
				var message = $(".selector").igUpload("option", "errorMessageOther");

				//Set
				$(".selector").igUpload("option", "errorMessageOther", "An error has occurred");

  • errorMessageTryToRemoveNonExistingFile

    Type:
    string
    Default:
    ""

    Get or set error message when trying to remove non existing file.

    Code Sample

     
				//Initialize
				$(".selector").igUpload({
					errorMessageTryToRemoveNonExistingFile : "File does not exist"
				});

				//Get
				var message = $(".selector").igUpload("option", "errorMessageTryToRemoveNonExistingFile");

				//Set
				$(".selector").igUpload("option", "errorMessageTryToRemoveNonExistingFile", "File does not exist");

  • errorMessageTryToStartNonExistingFile

    Type:
    string
    Default:
    ""

    Get or set error message when trying to start non existing file.

    Code Sample

     
				//Initialize
				$(".selector").igUpload({
					errorMessageTryToStartNonExistingFile : "File does not exist"
				});

				//Get
				var message = $(".selector").igUpload("option", "errorMessageTryToStartNonExistingFile");

				//Set
				$(".selector").igUpload("option", "errorMessageTryToStartNonExistingFile", "File does not exist");

  • errorMessageValidatingFileExtension

    Type:
    string
    Default:
    ""

    Get or set error message when file extension validation failed.

    Code Sample

     
				//Initialize
				$(".selector").igUpload({
					errorMessageValidatingFileExtension : "File extension not supported"
				});

				//Get
				var message = $(".selector").igUpload("option", "errorMessageValidatingFileExtension");

				//Set
				$(".selector").igUpload("option", "errorMessageValidatingFileExtension", "File extension not supported");

  • fileExtensionIcons

    Type:
    object
    Default:
    []

    Set icon css classes for specified file extension.

    Code Sample

     
				//Initialize
				$(".selector").igUpload({
					fileExtensionIcons: [
						{
							ext: ["gif", "jpg", "jpeg", "png", "bmp", "yuv", "tif", "thm", "psd"],
							css: "image-class",
							def: true
						},
						{
							ext: ["mp3", "wav", "mp4", "aac", "mid", "wma", "ra", "iff", "aif", "m3u", "mpa"],
							css: "audio-class",
							def: false
						}
					]
				});

				//Get
				var fileExtIcons = $(".selector").igUpload("option", "fileExtensionIcons");

				//Set
				var fileExtIcons = [
					{
						ext: ["gif", "jpg", "jpeg", "png", "bmp", "yuv", "tif", "thm", "psd"],
						css: "image-class",
						def: true
					},
					{
						ext: ["mp3", "wav", "mp4", "aac", "mid", "wma", "ra", "iff", "aif", "m3u", "mpa"],
						css: "audio-class",
						def: false
					}
				];
				$(".selector").igUpload("option", "fileExtensionIcons", "fileExtIcons");

    • css

      Type:
      string
      Default:
      ""

      Css classes which sets icon.

      Code Sample

               //Initialize
        $(".selector").igUpload({
            fileExtensionIcons: [
                {
                    ext: ["gif", "jpg", "jpeg", "png", "bmp", "yuv", "tif", "thm", "psd"],
                    css: "image-class",
                    def: true
                },
                {
                    ext: ["mp3", "wav", "mp4", "aac", "mid", "wma", "ra", "iff", "aif", "m3u", "mpa"],
                    css: "audio-class",
                    def: false
                }
            ]
        });
        
        //Get
        var fileExtIconsCSS = $(".selector").igUpload("option", "fileExtensionIcons")[0].css;

        //Set
        var fileExtIcons = [
            {
                ext: ["gif", "jpg", "jpeg", "png", "bmp", "yuv", "tif", "thm", "psd"],
                css: "image-class",
                def: true
            },
            {
                ext: ["mp3", "wav", "mp4", "aac", "mid", "wma", "ra", "iff", "aif", "m3u", "mpa"],
                css: "audio-class",
                def: false
            }
        ];
        $(".selector").igUpload("option", "fileExtensionIcons", "fileExtIcons");

    • def

      Type:
      bool
      Default:
      false

      Default icons when the file extension is not found. It is taken only the first item which have def set to true, other are ignored.

      Code Sample

               
        //Initialize
        $(".selector").igUpload({
            fileExtensionIcons: [
                {
                    ext: ["gif", "jpg", "jpeg", "png", "bmp", "yuv", "tif", "thm", "psd"],
                    css: "image-class",
                    def: true
                },
                {
                    ext: ["mp3", "wav", "mp4", "aac", "mid", "wma", "ra", "iff", "aif", "m3u", "mpa"],
                    css: "audio-class",
                    def: false
                }
            ]
        });
        
        //Get
        var fileExtIcons = $(".selector").igUpload("option", "fileExtensionIcons")[0].def;

        //Set
        var fileExtIconsIsDef = [
            {
                ext: ["gif", "jpg", "jpeg", "png", "bmp", "yuv", "tif", "thm", "psd"],
                css: "image-class",
                def: true
            },
            {
                ext: ["mp3", "wav", "mp4", "aac", "mid", "wma", "ra", "iff", "aif", "m3u", "mpa"],
                css: "audio-class",
                def: false
            }
        ];
        $(".selector").igUpload("option", "fileExtensionIcons", "fileExtIcons");

    • ext

      Type:
      array
      Default:
      []
      Elements Type:
      object

      Array of string for file extensions.

      Code Sample

               
        //Initialize
        $(".selector").igUpload({
            fileExtensionIcons: [
                {
                    ext: ["gif", "jpg", "jpeg", "png", "bmp", "yuv", "tif", "thm", "psd"],
                    css: "image-class",
                    def: true
                },
                {
                    ext: ["mp3", "wav", "mp4", "aac", "mid", "wma", "ra", "iff", "aif", "m3u", "mpa"],
                    css: "audio-class",
                    def: false
                }
            ]
        });
        
        //Get
        var fileExtIconsExt = $(".selector").igUpload("option", "fileExtensionIcons")[0].ext;

        //Set
        var fileExtIcons = [
            {
                ext: ["gif", "jpg", "jpeg", "png", "bmp", "yuv", "tif", "thm", "psd"],
                css: "image-class",
                def: true
            },
            {
                ext: ["mp3", "wav", "mp4", "aac", "mid", "wma", "ra", "iff", "aif", "m3u", "mpa"],
                css: "audio-class",
                def: false
            }
        ];
        $(".selector").igUpload("option", "fileExtensionIcons", "fileExtIcons");

  • fileSizeDecimalDisplay

    Type:
    number
    Default:
    2

    The number of digits after the decimal point.

    Code Sample

     
				//Initialize
				$(".selector").igUpload({
					fileSizeDecimalDisplay : 4
				});

				//Get
				var decimalDisplay = $(".selector").igUpload("option", "fileSizeDecimalDisplay");

				//Set
				$(".selector").igUpload("option", "fileSizeDecimalDisplay", 4);

  • fileSizeMetric

    Type:
    enumeration
    Default:
    auto

    Get or set file size metrics how to be shown files size.

    Code Sample

     
				//Initialize
				$(".selector").igUpload({
					fileSizeMetric : "mbytes"
				});
				//Get
				var sizeMetric = $(".selector").igUpload("option", "fileSizeMetric");
				//Set
				$(".selector").igUpload("option", "fileSizeMetric", "mbytes");

  • height

    Type:
    enumeration
    Default:
    ""

    Get or set height of the main container of the file upload control. Main container contains all buttons, progressbar, etc.

    Code Sample

     
				//Initialize
				$(".selector").igUpload({
					height : 300
				});
				//Get
				var height = $(".selector").igUpload("option", "height");
				//Set
				$(".selector").igUpload("option", "height", 300);

  • labelAddButton

    Type:
    string
    Default:
    ""

    Get or set label for browse button in main container.

    Code Sample

     
				//Initialize
				$(".selector").igUpload({
					labelAddButton : "Choose File"
				});

				//Get
				var label = $(".selector").igUpload("option", "labelAddButton");

				//Set
				$(".selector").igUpload("option", "labelAddButton", "Choose File");

  • labelClearAllButton

    Type:
    string
    Default:
    ""

    Get or set label for summary Clear all button. It will be shown only in multiple upload mode.

    Code Sample

     
				//Initialize
				$(".selector").igUpload({
					labelClearAllButton : "Clear Uploads"
				});

				//Get
				var label = $(".selector").igUpload("option", "labelClearAllButton");

				//Set
				$(".selector").igUpload("option", "labelClearAllButton", "Clear Uploads");

  • labelHideDetails

    Type:
    string
    Default:
    ""

    Get or set label for show/hide details button when main container is shown.

    Code Sample

     
				//Initialize
				$(".selector").igUpload({
					labelHideDetails : "Hide Upload Details"
				});

				//Get
				var label = $(".selector").igUpload("option", "labelHideDetails");

				//Set
				$(".selector").igUpload("option", "labelHideDetails", "Hide Upload Details");

  • labelProgressBarFileNameContinue

    Type:
    string
    Default:
    ""

    Get or set filename when it could not be shown the whole file name and should be shorten.

    Code Sample

     
				//Initialize
				$(".selector").igUpload({
					labelProgressBarFileNameContinue : "Continue with upload"
				});

				//Get
				var label = $(".selector").igUpload("option", "labelProgressBarFileNameContinue");

				//Set
				$(".selector").igUpload("option", "labelProgressBarFileNameContinue", "Continue with upload");

  • labelShowDetails

    Type:
    string
    Default:
    ""

    Get or set label for show/hide details button when main container is hidden.

    Code Sample

     
				//Initialize
				$(".selector").igUpload({
					labelShowDetails : "More Details"
				});

				//Get
				var label = $(".selector").igUpload("option", "labelShowDetails");

				//Set
				$(".selector").igUpload("option", "labelShowDetails", "More Details");

  • labelSummaryProgressBarTemplate

    Type:
    string
    Default:
    ""

    Get or set template for showing uploading information in summary progress bar. It will be shown only in multiple upload mode. {0} uploaded filesize. {1} - total file size.

    Code Sample

     
				//Initialize
				$(".selector").igUpload({
					labelSummaryProgressBarTemplate : "{0} uploaded from {1}, which is {2}%"
				});

				//Get
				var label = $(".selector").igUpload("option", "labelSummaryProgressBarTemplate");

				//Set
				$(".selector").igUpload("option", "labelSummaryProgressBarTemplate", "{0} uploaded from {1}, which is {2}%");

  • labelSummaryProgressButtonCancel

    Type:
    string
    Default:
    ""

    Get or set label for button cancelling all files. Shown only in multiple upload mode.

    Code Sample

     
				//Initialize
				$(".selector").igUpload({
					labelSummaryProgressButtonCancel : "Cancel All Uploads"
				});

				//Get
				var label = $(".selector").igUpload("option", "labelSummaryProgressButtonCancel");

				//Set
				$(".selector").igUpload("option", "labelSummaryProgressButtonCancel", "Cancel All Uploads");

  • labelSummaryProgressButtonContinue

    Type:
    string
    Default:
    ""

    Get or set label for start upload batch files. Shown only in multiple upload mode and autostartupload is false.

    Code Sample

     
				//Initialize
				$(".selector").igUpload({
					labelSummaryProgressButtonContinue : "Continue Uploading"
				});

				//Get
				var label = $(".selector").igUpload("option", "labelSummaryProgressButtonContinue");

				//Set
				$(".selector").igUpload("option", "labelSummaryProgressButtonContinue", "Continue Uploading");

  • labelSummaryProgressButtonDone

    Type:
    string
    Default:
    ""

    Get or set label when upload is finished. Shown only in multiple upload mode.

    Code Sample

     
				//Initialize
				$(".selector").igUpload({
					labelSummaryProgressButtonDone : "File Upload Complete!"
				});

				//Get
				var label = $(".selector").igUpload("option", "labelSummaryProgressButtonDone");

				//Set
				$(".selector").igUpload("option", "labelSummaryProgressButtonDone", "File Upload Complete!");

  • labelSummaryTemplate

    Type:
    string
    Default:
    ""

    Get or set template for showing summary template. {0} is count of uploaded files. {1} is total count of file to be uploaded.

    Code Sample

     
				//Initialize
				$(".selector").igUpload({
					labelSummaryTemplate : "{0} uploaded from {1}"
				});

				//Get
				var label = $(".selector").igUpload("option", "labelSummaryTemplate");

				//Set
				$(".selector").igUpload("option", "labelSummaryTemplate", "{0} uploaded from {1}");

  • labelUploadButton

    Type:
    string
    Default:
    ""

    Get or set label for the first shown browse button. When file is selected for the first time this button is hidden.

    Code Sample

     
				//Initialize
				$(".selector").igUpload({
					labelUploadButton : "Choose File"
				});

				//Get
				var label = $(".selector").igUpload("option", "labelUploadButton");

				//Set
				$(".selector").igUpload("option", "labelUploadButton", "Choose File");

  • maxFileSize

    Type:
    object
    Default:
    null

    Maximum size(in bytes) allowed for the file to be uploaded. If it is set to null or -1 there is no limitation otherwise if the size(of the selected file) exceeds this value it is not allowed to be uploaded. This option is used for validation only on client side and only if the browser supports HTML5 file API and share information about the file size.

  • maxSimultaneousFilesUploads

    Type:
    number
    Default:
    1

    Get or set count of files that could be uploaded at the same time.

    Code Sample

     
				//Initialize
				$(".selector").igUpload({
					maxSimultaneousFilesUploads : 5
				});

				//Get
				var maxUploads = $(".selector").igUpload("option", "maxSimultaneousFilesUploads");

				//Set
				$(".selector").igUpload("option", "maxSimultaneousFilesUploads", 5);

  • maxUploadedFiles

    Type:
    number
    Default:
    -1

    Get or set the maximum number of allowed files to upload.

    Code Sample

     
				//Initialize
				$(".selector").igUpload({
					maxUploadedFiles : 10
				});

				//Get
				var maxUploads = $(".selector").igUpload("option", "maxUploadedFiles");

				//Set
				$(".selector").igUpload("option", "maxUploadedFiles", 10);

  • mode

    Type:
    enumeration
    Default:
    single

    Get or set multiple or single file upload. In single upload it is possible to upload only one file at the same time.

    Code Sample

     
				//Initialize
				$(".selector").igUpload({
					mode : "multiple"
				});
				//Get
				var mode = $(".selector").igUpload("option", "mode");
				//Set
				$(".selector").igUpload("option", "mode", "multiple");

  • multipleFiles

    Type:
    bool
    Default:
    false

    Get or set a bool setting that allows user to select(for upload) more than 1 file from the browse dialog at once. HTML 5+ - it is supported by Chrome, MOzilla FF, Safar, Opera latest versions and IE10+.

    Code Sample

     
				//Initialize
				$(".selector").igUpload({
					multipleFiles : true
				});

				//Get
				var multipleFiles = $(".selector").igUpload("option", "multipleFiles");

  • progressUrl

    Type:
    string
    Default:
    "IGUploadStatusHandler.ashx"

    Get or set URL of HTTPHandler to get information about file upload, current size and also to get commands.

    Code Sample

     
				//Initialize
				$(".selector").igUpload({
					progressUrl : "IGUploadStatusHandler.ashx"
				});

				//Get
				var progressUrl = $(".selector").igUpload("option", "progressUrl");

				//Set
				$(".selector").igUpload("option", "progressUrl", "IGUploadStatusHandler.ashx");

  • showFileExtensionIcon

    Type:
    bool
    Default:
    true

    Get or set whether to show File Extension icon.

    Code Sample

     
				//Initialize
				$(".selector").igUpload({
					showFileExtensionIcon : false
				});

				//Get
				var showIcon = $(".selector").igUpload("option", "showFileExtensionIcon");

				//Set
				$(".selector").igUpload("option", "showFileExtensionIcon", false);

  • uploadUrl

    Type:
    string
    Default:
    "ig_fua34sf345sdf13sdf3454erdsf2345asd3425df5235d54df345.aspx"

    Get or set URL for uploading.

    Code Sample

     
				//Initialize
				$(".selector").igUpload({
					uploadUrl: "ig_fua34sf345sdf13sdf3454erdsf2345asd3425df5235d54df345.aspx",
				});

				//Get
				var fileExt = $(".selector").igUpload("option", "uploadUrl");

				//Set
				$(".selector").igUpload("option", "uploadUrl", "ig_fua34sf345sdf13sdf3454erdsf2345asd3425df5235d54df345.aspx");

  • width

    Type:
    enumeration
    Default:
    ""

    Get or set width of the main container of the file upload control. Main container contains all buttons, progressbar, etc.

    Code Sample

     
				//Initialize
				$(".selector").igUpload({
					width : 500
				});
				//Get
				var width = $(".selector").igUpload("option", "width");
				//Set
				$(".selector").igUpload("option", "width", 500);

For more information on how to interact with the Ignite UI controls' events, refer to
Using Events in Ignite UI.

Note: Calling API methods programmatically does not raise events related to their operation unless specifically stated otherwise by the corresponding API documentation; those events are only raised by their respective user interaction.

Show Details

  • cancelAllClicked

    Cancellable:
    false

    Defines the name of the cancel all button event click. Fired when cancel all button in summary is clicked. Fired only in multiple upload mode.

    • evt
      Type:Event

      JQuery event object.

    • ui
      Type:Object

        • owner
          Type:Object

          Gets the igUpload widget object.

    Code Sample

     
				//Bind after initialization
				$(document).delegate(".selector", "iguploadcancelallclicked", function (evt, ui) {
					//return the triggered event
					evt;

					// the 'ui' object is empty, when 'cancelAllClicked' event is fired
					ui;
				});

				//Initialize
				$(".selector").igUpload({
					cancelAllClicked : function(evt, ui) {...}
				});

  • fileExtensionsValidating

    Cancellable:
    true

    It is fired when validating file extensions.

    • evt
      Type:Event

      JQuery event object.

    • ui
      Type:Object

        • fileName
          Type:String

          Gets the full file name.

        • fileExtension
          Type:String

          Gets the file extension.

        • owner
          Type:Object

          Gets the the igUpload widget object.

    Code Sample

     
				//Bind after initialization
				$(document).delegate(".selector", "iguploadfileextensionsvalidating", function (evt, ui) {
					//returns full file name
					ui.fileName;

					//returns file extension
					ui.fileExtension;

					//returns igUpload widget object
					ui.owner;
				});

				//Initialize
				$(".selector").igUpload({
					fileExtensionsValidating : function(evt, ui) {...}
				});

  • fileSelected

    Cancellable:
    false

    Defines the name of the file upload selected event. Fired when file is selected from browse dialog.
    Return false in order to cancel uploading file.

    • evt
      Type:Event

      JQuery event object.

    • ui
      Type:Object

        • fileId
          Type:Number

          Gets the unique identifier of the file.

        • filePath
          Type:String

          Gets the name of the uploaded file.

        • owner
          Type:Object

          Gets the igUpload widget object.

    Code Sample

     
				//Bind after initialization
				$(document).delegate(".selector", "iguploadfileselected", function (evt, ui) {
					//return the triggered event
					evt;

					// A consecutive number for every file starting from 0. This useful for multiple upload scenarios, where you can use the ID to identify the different files.
					ui.fileID;

					// Name of the selected file
					ui.filePath;
				});

				//Initialize
				$(".selector").igUpload({
					fileSelected : function(evt, ui) {...}
				});

  • fileSelecting

    Cancellable:
    true

    Defines the name of the file upload selecting event. Fired when browse button is pressed.
    Return false in order to cancel selecting file.

    • evt
      Type:Event

      JQuery event object.

    • ui
      Type:Object

        • owner
          Type:Object

          Gets the igUpload widget object.

    Code Sample

     
				//Bind after initialization
				$(document).delegate(".selector", "iguploadfileselecting", function (evt, ui) {
					//return the triggered event
					evt;

					// the 'ui' object is empty, when 'fileSelecting' event is fired
					ui;
				});

				//Initialize
				$(".selector").igUpload({
					fileSelecting : function(evt, ui) {...}
				});

  • fileUploadAborted

    Cancellable:
    false

    Defines the name of the file upload cancel event. Fired when the server responses that the file is canceled.

    • evt
      Type:Event

      JQuery event object.

    • ui
      Type:Object

        • fileId
          Type:Number

          Gets the unique identifier of the file.

        • filePath
          Type:String

          Gets the name of the uploaded file.

        • totalSize
          Type:Number

          Gets the file size of the uploaded file.

        • uploadedBytes
          Type:Number

          Gets the uploaded bytes.

        • fileStatus
          Type:Number

          Gets the current file status.

        • owner
          Type:Object

          Gets the igUpload widget object.

    Code Sample

     
				//Bind after initialization
				$(document).delegate(".selector", "iguploadfileuploadaborted", function (evt, ui) {
					//return the triggered event
					evt;

					// A consecutive number for every file starting from 0. This useful for multiple upload scenarios, where you can use the ID to identify the different files.
					ui.fileID;

					// Name of the selected file
					ui.filePath;

					// Integer representing the status of the file. The value is determined by the server, where an enumeration that maps the integer value with the description of the status.
					ui.fileStatus;

					// Returns the file size sum of all selected files to upload. The metric is bytes.
					ui.totalSize;

					// Returns current amount of uploaded bytes when the fileUpload event is fired.
					ui.uploadedBytes;
				});

			//Initialize
			$(".selector").igUpload({
				fileUploadAborted : function(evt, ui) {...}
		});

  • fileUploaded

    Cancellable:
    false

    Defines the name of the uploaded event. Fired when the file is uploaded.

    • evt
      Type:Event

      JQuery event object.

    • ui
      Type:Object

        • fileId
          Type:Number

          Gets the unique identifier of the file.

        • filePath
          Type:String

          Gets the name of the uploaded file.

        • totalSize
          Type:Number

          Gets the file size of the uploaded file.

        • fileInfo
          Type:Object

          Gets reference to the fileInfo object - containing information for fileName, fileSize, serverMessage(if returned from server side), etc.

        • owner
          Type:Object

          Gets the igUpload widget object.

    Code Sample

     
				//Bind after initialization
				$(document).delegate(".selector", "iguploadfileuploaded", function (evt, ui) {
					//return the triggered event
					evt;

					// A consecutive number for every file starting from 0. This useful for multiple upload scenarios, where you can use the ID to identify the different files.
					ui.fileID;

					// Name of the selected file
					ui.filePath;

					// Returns the file size sum of all selected files to upload. The metric is bytes.
					ui.totalSize;

					//Returns an object, which contains information for the file(file.name, file.size, file.type etc.) and the current status of the upload(uploadedBytes, status, serverMessage etc.).
					ui.fileInfo
				});

				//Initialize
				$(".selector").igUpload({
					fileUploaded : function(evt, ui) {...}
				});

  • fileUploading

    Cancellable:
    true

    Defines the name of the file uploading event. Fired every time when fileuploader get status for the upload.
    Return false in order to cancel uploading file.

    • evt
      Type:Event

      JQuery event object.

    • ui
      Type:Object

        • fileId
          Type:Number

          Gets the unique identifier of the file.

        • filePath
          Type:String

          Gets the name of the uploaded file.

        • totalSize
          Type:Number

          Gets the file size of the uploaded file.

        • uploadedBytes
          Type:Number

          Gets the uploaded bytes.

        • fileStatus
          Type:Number

          Gets the current file status.

        • fileInfo
          Type:Object

          Gets reference to the fileInfo object - containing information for fileName, fileSize, serverMessage(if returned from server side), etc.

        • owner
          Type:Object

          Gets the igUpload widget object.

    Code Sample

     
				//Bind after initialization
				$(document).delegate(".selector", "iguploadfileuploading", function (evt, ui) {
					//return the triggered event
					evt;

					// A consecutive number for every file starting from 0. This useful for multiple upload scenarios, where you can use the ID to identify the different files.
					ui.fileID;

					// Name of the selected file
					ui.filePath;

					// Integer representing the status of the file. The value is determined by the server, where an enumeration that maps the integer value with the description of the status.
					ui.fileStatus;

					// Returns the file size sum of all selected files to upload. The metric is bytes.
					ui.totalSize;

					// Returns current amount of uploaded bytes when the fileUpload event is fired.
					ui.uploadedBytes;

					//Returns an object, which contains information for the file(file.name, file.size, file.type etc.) and the current status of the upload(uploadedBytes, status, serverMessage etc.).
					ui.fileInfo
				});

				//Initialize
				$(".selector").igUpload({
					fileUploading : function(evt, ui) {...}
				});

  • onError

    Cancellable:
    false

    Defines the name of the file upload error event. Fired when error is occurred.

    • evt
      Type:Event

      JQuery event object.

    • ui
      Type:Object

        • errorCode
          Type:Number

          Gets the current errorCode.

        • fileId
          Type:Number

          Gets the identifier of the file for which the event is fired(after that it can be used API function getFileInfo). NOTE: It is possible to be null in some cases: try to drop multiple files when mode is single , check maximum allowed uploading files fails or check for count of maximum allowed simultaneous files upload fails.

        • errorMessage
          Type:String

          Gets the detailed error description.

        • errorType
          Type:String

          Gets the error type - it could be clientside or serverside.

        • serverMessage
          Type:String

          Gets the specific server message returned by server - if errorType is serverside.

        • owner
          Type:Object

          Gets the igUpload widget object.

    Code Sample

     
				//Bind after initialization
				$(document).delegate(".selector", "iguploadonerror", function (evt, ui) {
					//return the triggered event
					evt;

					// Integer that represents the error code.
					ui.errorCode;

					// Detailed error information.
					ui.errorMessage;

					// Type of error - the values can be either server-side or client-side.
					ui.errorType;

					// This is property is able to be set during the server event UploadStarting. If not set it’s an empty string. (You can use it to display custom error messages.)
					ui.serverMessage;
				});

				//Initialize
				$(".selector").igUpload({
					onError : function(evt, ui) {...}
				});

  • onFormDataSubmit

    Cancellable:
    false

    It is fired before submitting to the server the uploading file(and its additional data if any). It could be used to append additional data fields to the FormData object(if the browser supports HTML5 file API - like newest Chrome, Firefox, IE11+). If the browser does not support HTML5 file API(IE10 and older) it could be added these data fields(as hidden input fields) to the form. Use the public API function addDataFields.

    • evt
      Type:Event

      JQuery event object.

    • ui
      Type:Object

        • fileId
          Type:Number

          Gets the unique identifier of the file.

        • fileInfo
          Type:Object

          Gets reference to the fileInfo object - containing information for fileName, fileSize, serverMessage(if returned from the server-side), etc.

        • xhr
          Type:Object

          Gets reference to the original XMLHttpRequest object(if the browser supports HTML 5 file API - if not it is undefined).

        • formData
          Type:Object

          Gets reference to FormData object(if the browser supports HTML5 file API) OR reference to jQuery representation of <form>.

        • owner
          Type:Object

          Gets the igUpload widget object.

    Code Sample

     
				//Bind after initialization
				$(document).delegate(".selector", "iguploadonformdatasubmit", function (evt, ui) {
					//return the triggered event
					evt;

					//Returns the igUpload widget object.
					ui.owner

					// String that represents the unique identifier of the file.
					ui.fileId;

					// Returns an object, which contains information for the file(file.name, file.size, file.type etc.) and the current status of the upload(uploadedBytes, status, serverMessage etc.).
					ui.fileInfo;

					// Returns the original XMLHttpRequest object(if the browser supports HTML 5, otherwise this will return undefined).
					ui.xhr;

					// Returns the FormData object(if the browser supports HTML5) or a reference to the jQuery representation of <form>.
					ui.formData;
				});

				//Initialize
				$(".selector").igUpload({
					onFormDataSubmit : function(evt, ui) {...}
				});

  • onXHRLoad

    Cancellable:
    false

    It is fired when event onload(of XmlHttpRequest) is fired. This event will be fired only if the browser supports HTML5 file API.

    • evt
      Type:Event

      JQuery event object.

    • ui
      Type:Object

        • fileId
          Type:Number

          Gets the unique identifier of the file.

        • xhr
          Type:Object

          Gets reference to the original XMLHttpRequest object.

        • fileInfo
          Type:Object

          Gets reference to the fileInfo object - containing information for fileName, fileSize, serverMessage(if returned from the server-side), etc.

        • owner
          Type:Object

          Gets the igUpload widget object.

    Code Sample

     
				//Bind after initialization
				$(document).delegate(".selector", "iguploadoonxhrload", function (evt, ui) {
					//return the triggered event
					evt;

					//Returns the igUpload widget object.
					ui.owner

					// String that represents the unique identifier of the file.
					ui.fileId;

					// Returns an object, which contains information for the file(file.name, file.size, file.type etc.) and the current status of the upload(uploadedBytes, status, serverMessage etc.).
					ui.fileInfo;

					// Returns the original XMLHttpRequest object(if the browser supports HTML 5, otherwise this will return undefined).
					ui.xhr;
				});

				//Initialize
				$(".selector").igUpload({
					onXHRLoad : function(evt, ui) {...}
				});

  • addDataField

    .igUpload( "addDataField", formData:object, field:object );

    Append additional data field to formData(before submitting it to the server). Usually this function is used in the handler of the event onFormDataSubmit. If the browser supports HTML5 file API formData is instance of FormData, otherwise(like IE10 and older) formData is jQuery representation of the <form> that should be submitted to the server.

    • formData
    • Type:object
    • If the browser supports HTML5 file API formData is instance of FormData, otherwise(like IE10 and older) formData is jQuery representation of the <form> that should be submitted to the server.
    • field
    • Type:object
    • Data field that should be appended to the formData. The object has 2 properties - value and name. If the browser supports HTML5 the data field is appended to the formData object. Otherwise it is appended as input hidden field to the <form>.

    Code Sample

     
				$(".selector").igUpload("addDataField", ui.formData, { "name": "Parameter Name", "value": "Value" });

  • addDataFields

    .igUpload( "addDataFields", formData:object, fields:array );

    Append additional data fields to formData(before submitting it to the server). Usually this function is used in the handler of the event onFormDataSubmit. If the browser supports HTML5 file API formData is instance of FormData, otherwise(like IE10 and older) formData is jQuery representation of the <form> that should be submitted to the server.

    • formData
    • Type:object
    • If the browser supports HTML5 file API formData is instance of FormData, otherwise(like IE10 and older) formData is jQuery representation of the <form> that should be submitted to the server.
    • fields
    • Type:array
    • Array of data fields that should be appended to the formData. Each data field is object with 2 properties - value and name. If the browser supports HTML5 these data fields are added to the formData. Otherwise each of these data field is appended as input hidden field to the <form>.

    Code Sample

     
				$(".selector").igUpload("addDataFields", ui.formData, [{ "name": "Parameter Name 1", "value": "Value 1" }, { "name": "Parameter Name 2", "value": "Value 2" }]);

  • cancelAll

    .igUpload( "cancelAll" );

    Cancel all uploading and pending files.

    Code Sample

     
				$(".selector").igUpload("cancelAll");

  • cancelUpload

    .igUpload( "cancelUpload", formNumber:number );

    Cancel upload for the specified file id
    formNumber - id of the file to be canceled.

    • formNumber
    • Type:number
    • id of the form which should be cancelled.

    Code Sample

     
				$(".selector").igUpload("cancelUpload", 1);

  • clearAll

    .igUpload( "clearAll" );

    Hide finished files.

    Code Sample

     
				$(".selector").igUpload("clearAll");

  • container

    .igUpload( "container" );

    Return jquery object of fileupload container - html DOM element.

    Code Sample

     
				$(".selector").igUpload("container");

  • destroy

    .igUpload( "destroy" );

    Destroy the widget.

    Code Sample

     
      $(".selector").igUpload("destroy");

  • getFileInfo

    .igUpload( "getFileInfo", fileIndex:number );
    Return Type:
    object
    Return Type Description:
    Returns the information about uploading files. The object contains these properties, path, key - unique id used in GET requests to get status from the server side, file - file object containing main info for the uploading file, formNumber, serverMessage- message returned by the server(optional), sizeBytes - total size, status, uploadedBytes, xhr(if the browser supports HTML5 file API).

    Returns the information about the file by specified file identifier. It could be file which is uploading/uploaded or uploading is not started. If there isn"t file with the specified file id returns null.

    • fileIndex
    • Type:number
    • unique identifier of the file.

    Code Sample

     
				var fileInfo = $(".selector").igUpload("getFileInfo", 0);

  • getFileInfoData

    .igUpload( "getFileInfoData" );
    Return Type:
    object
    Return Type Description:
    Returns the information about uploading files.

    Returns the information about uploading files - all files uploaded/uploading/pending.

    Code Sample

     
				var fileInfo = $(".selector").igUpload("getFileInfoData");

  • startUpload

    .igUpload( "startUpload", formNumber:number );

    Start uploading file as submitting form with the specified formNumber.

    • formNumber
    • Type:number
    • id of the upload form.

    Code Sample

     
				$(".selector").igUpload("startUpload", 1);

  • widget

    .igUpload( "widget" );

    Returns the current widget element.

    Code Sample

     
				var upload = $(".selector").igUpload("widget");

  • ui-widget ui-widget ui-widget-content ui-corner-all ui-igupload

    Css class for the container.

  • ui-ie6

    Class for IE6.

  • ui-ie7

    Class for IE7.

  • ui-moz

    Class for FF.

  • ui-opera

    Class for Opera.

  • ui-webkit

    Class for Webkit powered browsers.

  • ui-igupload-basemaincontainer

    Css classes applied to main container in single/multiple mode.

  • ui-igupload-browsebutton

    Css classes applied on browse button - button in main container.

  • ui-helper-clearfix

    Clear class.

  • ui-container-button-cancel-class ui-helper-clearfix

    Css classes for container of the cancel/done button near the progress bar.

  • ui-igupload-container ui-widget-content

    Css classes applied to DOM element containing all file upload progress bars.

  • ui-widget-content ui-igupload-progress-container ui-corner-all ui-helper-clearfix

    Css class for container of each individual file - including progress bar, file info, cancel button, etc.

  • ui-igupload-fimaincontainer

    Css class applied on div which contains add button, clear button and progress details of the files.

  • ui-helper-hidden

    Hide element.

  • ui-iguploadmultiple

    Css classes applied to main container when multiple file upload mode is selected.

  • ui-igupload-progressbar-filename

    Css classes applied to file name DOM element in the summary progress bar.

  • ui-igupload-progressbar-filesize

    Css classes applied to file size DOM element in the summary progress bar.

  • ui-igupload-progressbar-container ui-helper-clearfix

    Css classes of the container of the filename DOM element and file size DOM element inside each of the progressbar.

  • ui-igupload-progressbar-upload ui-igupload-progressbar-upload-single ui-helper-clearfix

    Css class applied on single progressbar.

  • ui-helper-clearfix

    Css class container for each file.

  • ui-iguploadsingle

    Css classes applied to main container when multiple file upload mode is selected.

  • ui-igstartupbrowsebutton

    Class for startup browse button.

  • ui-igupload-summary-button

    Css classes which are set to the cancel button.

  • ui-igupload-summaryinformation-container ui-helper-clearfix

    Css classes of container in summary progress area - contains label for summary progress and show/hide details button.

  • ui-igupload-summaryprogressbar

    Css classes applied to summary progressbar.

  • ui-igupload-summaryprogres_summpbar_progress

    Css classes set inside progress div.

  • ui-igupload-summaryprogress-label

    Css classes of label of the summary progress bar.

  • ui-igupload-summaryprogress-label ui-igupload-summaryprogress-secondary-label

    Css class for the second label in summary progress bar.

  • ui-igupload-summaryprogresscontainer

    Css classes applied to container of summary progress bar.

  • ui-igupload-showhidedetails-button

    Css classes of show/hide details button in summary progress area.

  • ui-igupload-summaryuploadedfiles-label

    Css classes applied to DOM element showing status of summary progress.

  • ui-igupload-uploadprogress

    Div containing separate individual file upload.

Copyright © 1996 - 2024 Infragistics, Inc. All rights reserved.