Ignite UI™ API Documentation

ui.igUpload

Overview
Options
Events
Methods
Theming

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

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
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Get or set error message when AJAX Request to get file size throws error.
Use option locale.errorMessageAJAXRequestFileSize.

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
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Get or set error message when ajax call to send cancel upload command.
Use option locale.errorMessageCancelUpload.

Code Sample

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

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

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

errorMessageDropMultipleFilesWhenSingleModel
Removed

Type:

string

Default:

""

This option has been removed as of 2017.2 Volume release.
Get or set error message when trying to drop more than 1 file and mode is single.
Use option locale.errorMessageDropMultipleFilesWhenSingleModel.

errorMessageGetFileStatus
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Get or set error message when ajax call to get file status throws error.
Use option locale.errorMessageGetFileStatus.

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
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Get or set message shown when max file size of the uploaded file exceeds the limit.
Use option locale.errorMessageMaxFileSizeExceeded.

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
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Get or set error message when maximum simultaneous files is less or equal to 0.
Use option locale.errorMessageMaxSimultaneousFiles.

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
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Get or set error message when maximum allowed files exceeded.
Use option locale.errorMessageMaxUploadedFiles.

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
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Get or set error message when file is not found.
Use option locale.errorMessageNoSuchFile.

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
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Get or set error message different from the other messages.
Use option locale.errorMessageOther.

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
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Get or set error message when trying to remove non existing file.
Use option locale.errorMessageTryToRemoveNonExistingFile.

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
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Get or set error message when trying to start non existing file.
Use option locale.errorMessageTryToStartNonExistingFile.

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
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Get or set error message when file extension validation failed.
Use option locale.errorMessageValidatingFileExtension.

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
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Get or set label for browse button in main container.
Use option locale.labelAddButton.

Code Sample

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

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

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

labelClearAllButton
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Get or set label for summary Clear all button. It will be shown only in multiple upload mode.
Use option locale.labelClearAllButton.

Code Sample

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

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

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

labelHideDetails
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Get or set label for show/hide details button when main container is shown.
Use option locale.labelHideDetails.

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
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Get or set filename when it could not be shown the whole file name and should be shorten.
Use option locale.labelProgressBarFileNameContinue.

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
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Get or set label for show/hide details button when main container is hidden.
Use option locale.labelShowDetails.

Code Sample

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

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

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

labelSummaryProgressBarTemplate
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
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.
Use option locale.labelSummaryProgressBarTemplate.

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
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Get or set label for button cancelling all files. Shown only in multiple upload mode.
Use option locale.labelSummaryProgressButtonCancel.

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
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Get or set label for start upload batch files. Shown only in multiple upload mode and autostartupload is false.
Use option locale.labelSummaryProgressButtonContinue.

Code Sample

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

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

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

labelSummaryProgressButtonDone
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Get or set label when upload is finished. Shown only in multiple upload mode.
Use option locale.labelSummaryProgressButtonDone.

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
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Get or set template for showing summary template. {0} is count of uploaded files. {1} is total count of file to be uploaded.
Use option locale.labelSummaryTemplate.

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
Removed

Type:: string
Default:: ""

This option has been removed as of 2017.2 Volume release.
Get or set label for the first shown browse button. When file is selected for the first time this button is hidden.
Use option locale.labelUploadButton.

Code Sample

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

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

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

language
Inherited

Type:: string
Default:: "en"

Set/Get the locale language setting for the widget.

Code Sample

 
					//Initialize
				$(".selector").igUpload({
					language: "ja"
				});

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

				// Set
				$(".selector").igUpload("option", "language", "ja");

locale

Type:: object
Default:: {}

errorMessageAJAXRequestFileSize

Type:: string
Default:: ""

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

Code Sample

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

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

					//Set
					$(".selector").igUpload("option", "locale", { 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({
						locale: {
							errorMessageCancelUpload: "Upload Cancelled"
						}
					});

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

					//Set
					$(".selector").igUpload("option", "locale", { errorMessageCancelUpload: "Upload Cancelled" });

errorMessageDropMultipleFilesWhenSingleModel

Type:: string
Default:: ""

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

Code Sample

 
					//Initialize
					$(".selector").igUpload({
						locale: {
							errorMessageDropMultipleFilesWhenSingleModel: "Can only drop one file."
						}
					});

					//Get
					var text = $(".selector").igUpload("option", "locale").errorMessageDropMultipleFilesWhenSingleModel;

					//Set
					$(".selector").igUpload("option", "locale", { errorMessageDropMultipleFilesWhenSingleModel: "Can only drop one file." });

errorMessageFileSizeExceeded

Type:: string
Default:: ""

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

Code Sample

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

					//Get
					var text = $(".selector").igUpload("option", "locale").errorMessageFileSizeExceeded;

					//Set
					$(".selector").igUpload("option", "locale", { errorMessageFileSizeExceeded: "Unable to determine upload progress" });

errorMessageGetFileStatus

Type:: string
Default:: ""

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

Code Sample

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

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

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

errorMessageMaxSimultaneousFiles

Type:: string
Default:: ""

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

Code Sample

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

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

					//Set
					$(".selector").igUpload("option", "locale", { 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({
						locale: {
							errorMessageMaxUploadedFiles: "File must be smaller than 50 mb."
						}
					});

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

					//Set
					$(".selector").igUpload("option", "locale", { errorMessageMaxUploadedFiles: "File must be smaller than 50 mb." });

errorMessageNoSuchFile

Type:: string
Default:: ""

Get or set error message when file is not found.

Code Sample

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

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

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

errorMessageOther

Type:: string
Default:: ""

Get or set error message different from the other messages.

Code Sample

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

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

					//Set
					$(".selector").igUpload("option", "locale", { 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({
						locale: {
							errorMessageTryToRemoveNonExistingFile: "Can only upload 2 files at a time"
						}
					});

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

					//Set
					$(".selector").igUpload("option", "locale", { errorMessageTryToRemoveNonExistingFile: "Can only upload 2 files at a time" });

errorMessageTryToStartNonExistingFile

Type:: string
Default:: ""

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

Code Sample

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

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

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

errorMessageValidatingFileExtension

Type:: string
Default:: ""

Get or set error message when file extension validation failed.

Code Sample

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

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

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

labelAddButton

Type:: string
Default:: ""

Get or set label for browse button in main container.

Code Sample

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

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

					//Set
					$(".selector").igUpload("option", "locale", { 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({
						locale: {
							labelClearAllButton: "Clear all"
						}
					});

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

					//Set
					$(".selector").igUpload("option", "locale", { labelClearAllButton: "Clear all" });

labelHideDetails

Type:: string
Default:: ""

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

Code Sample

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

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

					//Set
					$(".selector").igUpload("option", "locale", { 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({
						locale: {
							labelProgressBarFileNameContinue: "Continue with upload"
						}
					});

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

					//Set
					$(".selector").igUpload("option", "locale", { 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({
						locale: {
							labelShowDetails: "More Details"
						}
					});

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

					//Set
					$(".selector").igUpload("option", "locale", { 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({
						locale: {
							labelSummaryProgressBarTemplate: "{0} uploaded from {1}, which is {2}%"
						}
					});

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

					//Set
					$(".selector").igUpload("option", "locale", { 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({
						locale: {
							labelSummaryProgressButtonCancel: "Cancel All Uploads"
						}
					});

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

					//Set
					$(".selector").igUpload("option", "locale", { 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({
						locale: {
							labelSummaryProgressButtonContinue: "Continue Uploading"
						}
					});

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

					//Set
					$(".selector").igUpload("option", "locale", { 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({
						locale: {
							labelSummaryProgressButtonDone: "File Upload Complete!"
						}
					});

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

					//Set
					$(".selector").igUpload("option", "locale", { 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({
						locale: {
							labelSummaryTemplate: "{0} uploaded from {1}"
						}
					});

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

					//Set
					$(".selector").igUpload("option", "locale", { 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({
						locale: {
							labelUploadButton: "Upload File"
						}
					});

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

					//Set
					$(".selector").igUpload("option", "locale", { labelUploadButton: "Upload File" });

titleAddFileButton

Type:: string
Default:: ""

Get or set title for browse button in main container.

Code Sample

 
					//Initialize
					$(".selector").igUpload({
						locale: {
							titleAddFileButton: "Add File"
						}
					});

					//Get
					var text = $(".selector").igUpload("option", "locale").titleAddFileButton;

					//Set
					$(".selector").igUpload("option", "locale", { titleAddFileButton: "Add File" });

titleCancelUploadButton

Type:: string
Default:: ""

Get or set title for the cancel upload button.

Code Sample

 
					//Initialize
					$(".selector").igUpload({
						locale: {
							titleCancelUploadButton: "Cancel"
						}
					});

					//Get
					var text = $(".selector").igUpload("option", "locale").titleCancelUploadButton;

					//Set
					$(".selector").igUpload("option", "locale", { titleCancelUploadButton: "Cancel" });

titleClearAllButton

Type:: string
Default:: ""

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

Code Sample

 
					//Initialize
					$(".selector").igUpload({
						locale: {
							titleClearAllButton: "Clear"
						}
					});

					//Get
					var text = $(".selector").igUpload("option", "locale").titleClearAllButton;

					//Set
					$(".selector").igUpload("option", "locale", { titleClearAllButton: "Clear"});

titleClearUploaded

Type:: string
Default:: ""

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

Code Sample

 
					//Initialize
					$(".selector").igUpload({
						locale: {
							titleClearUploaded: "Clear"
						}
					});

					//Get
					var text = $(".selector").igUpload("option", "locale").titleClearUploaded;

					//Set
					$(".selector").igUpload("option", "locale", { titleClearUploaded: "Clear" });

titleHideDetailsButton

Type:: string
Default:: ""

Get or set title for hide details button.

Code Sample

 
					//Initialize
					$(".selector").igUpload({
						locale: {
							titleHideDetailsButton: "Hide details"
						}
					});

					//Get
					var text = $(".selector").igUpload("option", "locale").titleHideDetailsButton;

					//Set
					$(".selector").igUpload("option", "locale", { titleHideDetailsButton: "Hide details" });

titleShowDetailsButton

Type:: string
Default:: ""

Get or set title for show details button.

Code Sample

 
					//Initialize
					$(".selector").igUpload({
						locale: {
							titleShowDetailsButton: "Show details"
						}
					});

					//Get
					var text = $(".selector").igUpload("option", "locale").titleShowDetailsButton;

					//Set
					$(".selector").igUpload("option", "locale", { titleShowDetailsButton: "Show details" });

titleSingleUploadButtonContinue

Type:: string
Default:: ""

Get or set title for Continue button.

Code Sample

 
					//Initialize
					$(".selector").igUpload({
						locale: {
							titleSingleUploadButtonContinue: "Upload"
						}
					});

					//Get
					var text = $(".selector").igUpload("option", "locale").titleSingleUploadButtonContinue;

					//Set
					$(".selector").igUpload("option", "locale", { titleSingleUploadButtonContinue: "Upload"});

titleSummaryProgressButtonCancel

Type:: string
Default:: ""

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

Code Sample

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

					//Get
					var text = $(".selector").igUpload("option", "locale").titleSummaryProgressButtonCancel;

					//Set
					$(".selector").igUpload("option", "locale", { titleSummaryProgressButtonCancel: "Cancel All Uploads" });

titleSummaryProgressButtonContinue

Type:: string
Default:: ""

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

Code Sample

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

					//Get
					var text = $(".selector").igUpload("option", "locale").titleSummaryProgressButtonContinue;

					//Set
					$(".selector").igUpload("option", "locale", { titleSummaryProgressButtonContinue: "Continue Uploading" });

titleSummaryProgressButtonDone

Type:: string
Default:: ""

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

Code Sample

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

					//Get
					var text = $(".selector").igUpload("option", "locale").titleSummaryProgressButtonDone;

					//Set
					$(".selector").igUpload("option", "locale", { titleSummaryProgressButtonDone: "File Upload Complete!"});

titleUploadFileButtonInit

Type:: string
Default:: ""

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

Code Sample

 
					//Initialize
					$(".selector").igUpload({
						locale: {
							titleUploadFileButtonInit: "Upload"
						}
					});

					//Get
					var text = $(".selector").igUpload("option", "locale").titleUploadFileButtonInit;

					//Set
					$(".selector").igUpload("option", "locale", { titleUploadFileButtonInit: "Upload" });

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");

regional
Inherited

Type:: enumeration
Default:: en-US

Set/Get the regional setting for the widget.

Code Sample

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

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");

useSingleRequest

Type:: bool
Default:: false

Get or set whether to use only one request for sending data, when you are sending more than one file.

Code Sample

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

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

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

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

Code Sample

 
				//Bind after initialization
				$(document).on("iguploadcancelallclicked", ".selector", 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

Code Sample

 
				//Bind after initialization
				$(document).on("iguploadfileextensionsvalidating", ".selector", 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

Code Sample

 
				//Bind after initialization
				$(document).on("iguploadfileselected", ".selector", 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

Code Sample

 
				//Bind after initialization
				$(document).on("iguploadfileselecting", ".selector", 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

Code Sample

 
				//Bind after initialization
				$(document).on("iguploadfileuploadaborted", ".selector", 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

Code Sample

 
				//Bind after initialization
				$(document).on("iguploadfileuploaded", ".selector", 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

Code Sample

 
				//Bind after initialization
				$(document).on("iguploadfileuploading", ".selector", 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
Code Sample
```
 
				//Bind after initialization
				$(document).on("iguploadonerror", ".selector", 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
Code Sample
```
 
				//Bind after initialization
				$(document).on("iguploadonformdatasubmit", ".selector", 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

Code Sample

 
				//Bind after initialization
				$(document).on("iguploadoonxhrload", ".selector", 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) {...}
				});

Show Details

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);
			  
```
changeGlobalLanguage
Inherited

.igUpload( "changeGlobalLanguage" );
Changes the widget language to global language. Global language is the value in $.ig.util.language.
Code Sample
```
 
				$(".selector").igUpload("changeGlobalLanguage");
			 
```
changeGlobalRegional
Inherited

.igUpload( "changeGlobalRegional" );
Changes the widget regional settins to global regional settings. Global regional settings are container in $.ig.util.regional.
Code Sample
```
 
				$(".selector").igUpload("changeGlobalRegional");
			 
```
changeLocale

.igUpload( "changeLocale" );
Changes the all locales into the widget element to the language specified in options.language
Note that this method is for rare scenarios, use language or locale option setter.
Code Sample
```
 
				$(".selector").igUpload("changeLocale");
			 
```
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. If left undefined and useSingleRequest is true all pending files will be uploaded.
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.

Ignite UI | Samples

ui.igUpload

Code Sample

Related Samples

Related Topics

Dependencies

Inherits

allowedExtensions

Code Sample

autostartupload

Code Sample

controlId

Code Sample

css

Code Sample

errorMessageAJAXRequestFileSizeRemoved

Code Sample

errorMessageCancelUploadRemoved

Code Sample

errorMessageDropMultipleFilesWhenSingleModelRemoved

errorMessageGetFileStatusRemoved

Code Sample

errorMessageMaxFileSizeExceededRemoved

Code Sample

errorMessageMaxSimultaneousFilesRemoved

Code Sample

errorMessageMaxUploadedFilesRemoved

Code Sample

errorMessageNoSuchFileRemoved

Code Sample

errorMessageOtherRemoved

Code Sample

errorMessageTryToRemoveNonExistingFileRemoved

Code Sample

errorMessageTryToStartNonExistingFileRemoved

Code Sample

errorMessageValidatingFileExtensionRemoved

Code Sample

fileExtensionIcons

Code Sample

css

Code Sample

def

Code Sample

ext

Code Sample

fileSizeDecimalDisplay

Code Sample

fileSizeMetric

Code Sample

height

Code Sample

labelAddButtonRemoved

Code Sample

labelClearAllButtonRemoved

Code Sample

labelHideDetailsRemoved

Code Sample

labelProgressBarFileNameContinueRemoved

Code Sample

labelShowDetailsRemoved

Code Sample

labelSummaryProgressBarTemplateRemoved

Code Sample

labelSummaryProgressButtonCancelRemoved

Code Sample

labelSummaryProgressButtonContinueRemoved

Code Sample

labelSummaryProgressButtonDoneRemoved

Code Sample

labelSummaryTemplateRemoved

Code Sample

labelUploadButtonRemoved

Code Sample

languageInherited

Code Sample

locale

errorMessageAJAXRequestFileSize

Code Sample

errorMessageCancelUpload

errorMessageAJAXRequestFileSize
Removed

errorMessageCancelUpload
Removed

errorMessageDropMultipleFilesWhenSingleModel
Removed

errorMessageGetFileStatus
Removed

errorMessageMaxFileSizeExceeded
Removed

errorMessageMaxSimultaneousFiles
Removed

errorMessageMaxUploadedFiles
Removed

errorMessageNoSuchFile
Removed

errorMessageOther
Removed

errorMessageTryToRemoveNonExistingFile
Removed

errorMessageTryToStartNonExistingFile
Removed

errorMessageValidatingFileExtension
Removed

labelAddButton
Removed

labelClearAllButton
Removed

labelHideDetails
Removed

labelProgressBarFileNameContinue
Removed

labelShowDetails
Removed

labelSummaryProgressBarTemplate
Removed

labelSummaryProgressButtonCancel
Removed

labelSummaryProgressButtonContinue
Removed

labelSummaryProgressButtonDone
Removed

labelSummaryTemplate
Removed

labelUploadButton
Removed

language
Inherited