FileUploader Events

This section describes events fired by this widget.

disposing

Fires when the widget is being removed.

Event Handler Argument:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element. Available only in the Knockout approach.

Instead, you can use the onDisposing option to handle the event.

See Also

NOTE: This event fires only if the widget is removed using the remove(), empty(), or html() jQuery methods.

initialized

Fires when the widget is initialized.

Event Handler Argument:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.

Instead, you can use the onInitialized option to handle the event.

See Also

optionChanged

Fires after an option of the component is changed.

Event Handler Argument:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
name: String
Specifies the name of the option whose value is changed.
fullName: String
Specifies a full name of the option whose value is changed. The full name is formed by concatenating the names of the options that are presented in the hierarchy of the given option. The names are delimited by commas.
value: any
Specifies a new value for the option.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element. Available only in the Knockout approach.

Instead, you can use the onOptionChanged option to handle the event.

See Also

progress

Fires when a segment of a file has been uploaded.

Event Handler Argument:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element. Available only in the Knockout approach.
file: Object
An uploaded file.
segmentSize: Number
The size of an uploaded file segment.
bytesLoaded: Number
The total count of uploaded bytes.
jQueryEvent: jQuery.Event
Specifies the jQuery event that caused action execution.
request: Object
Specifies an XMLHttpRequest for the file.

Instead, you can use the onProgress option to handle the event.

See Also

uploadAborted

Fires when file uploading has been aborted.

Event Handler Argument:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element. Available only in the Knockout approach.
file: Object
An uploaded file.
jQueryEvent: jQuery.Event
Specifies the jQuery event that caused action execution.
request: Object
Specifies an XMLHttpRequest for the file.

Instead, you can use the onUploadAborted option to handle the event.

See Also

uploaded

Fires when a file has been uploaded.

Event Handler Argument:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element. Available only in the Knockout approach.
file: Object
An uploaded file.
jQueryEvent: jQuery.Event
Specifies the jQuery event that caused action execution.
request: Object
Specifies an XMLHttpRequest for the file.

Instead, you can use the onUploaded option to handle the event.

See Also
Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController">
    <div dx-button="{ text: 'Subscribe to Uploaded event', onClick: clickHandler }"></div>
    <div class=" uploader" dx-file-uploader="{
        multiple: true,
        uploadMode: 'useButtons',
        onInitialized: onInitialized,
        uploadUrl: '/Content/Services/upload.aspx'
    }"></div>
</div>
var flag = false;
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.fileUploaderInstance = {};
    $scope.onInitialized = function (e) {
        $scope.fileUploaderInstance = e.component;
    };
    $scope.clickHandler = function (e) {
        if (flag === false) {
            $scope.fileUploaderInstance.on(
                "uploaded", function (e) {
                    DevExpress.ui.notify("Files have been Uploaded", "success", 1000);
                            }
            );
            e.component.option("text", "Unsubscribe from Uploaded event");
            flag = true;
        } else {
            $scope.fileUploaderInstance.off("uploaded");
            e.component.option("text", "Subscribe to Uploaded event");
            flag = false;
        }
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body {
  text-align: center;
}
.uploader {
  margin-top: 25px;
}
<div data-bind="dxButton: { text: 'Subscribe to Uploaded event', onClick: clickHandler }"></div>
<div class="uploader" data-bind="dxFileUploader: {
    multiple: true,
    uploadMode: 'useButtons',
    onInitialized: onInitialized,
    uploadUrl: '/Content/Services/upload.aspx'
}"></div>
var flag = false;
var myViewModel = {
    fileUploaderInstance: {},
    onInitialized: function (e) {
        myViewModel.fileUploaderInstance = e.component;
    },
    clickHandler: function (e) {
        if (flag === false) {
            myViewModel.fileUploaderInstance.on(
                "uploaded", function (e) {
                                DevExpress.ui.notify("Files have been uploaded", "success", 1000);
                            }
            );
            e.component.option("text", "Unsubscribe from Uploaded event");
            flag = true;
        } else {
            myViewModel.fileUploaderInstance.off("uploaded");
            e.component.option("text", "Subscribe to Uploaded event");
            flag = false;
        }
    }
}
ko.applyBindings(myViewModel);
body {
  text-align: center;
}
.uploader {
  margin-top: 25px;
}
<div id="button"></div>
<div class="uploader" id="myFileUploader"></div>
var flag = false;
$("#myFileUploader").dxFileUploader({
    multiple: true,
    uploadMode: 'useButtons',
    uploadUrl: '/Content/Services/upload.aspx'
});
$("#button").dxButton({
    text: 'Subscribe to Uploaded event',
    onClick: function (e) {
        if (flag === false) {
            $("#myFileUploader").dxFileUploader("instance").on(
                "uploaded", function (e) { DevExpress.ui.notify("Files have been uploaded", "success", 1000); }
            );
            e.component.option("text", "Unsubscribe from Uploaded event");
            flag = true;
        } else {
            $("#myFileUploader").dxFileUploader("instance").off("uploaded");
            e.component.option("text", "Subscribe to Uploaded event");
            flag = false;
        }
    }
});
body {
  text-align: center;
}
.uploader {
  margin-top: 25px;
}

uploadError

Fires when an error has occurred during uploading.

Event Handler Argument:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element. Available only in the Knockout approach.
file: Object
An uploaded file.
jQueryEvent: jQuery.Event
Specifies the jQuery event that caused action execution.
request: Object
Specifies an XMLHttpRequest for the file.

Instead, you can use the onUploadError option to handle the event.

See Also

uploadStarted

Fires when file uploading is started.

Event Handler Argument:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element. Available only in the Knockout approach.
file: Object
An uploaded file.
jQueryEvent: jQuery.Event
Specifies the jQuery event that caused action execution.
request: Object
Specifies an XMLHttpRequest for the file.

Instead, you can use the onUploadStarted option to handle the event.

See Also
Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController">
    <div dx-button="{ text: 'Subscribe to UploadStarted event', onClick: clickHandler }"></div>
    <div class=" uploader" dx-file-uploader="{
        multiple: true,
        uploadMode: 'useButtons',
        onInitialized: onInitialized,
        uploadUrl: '/Content/Services/upload.aspx'
    }"></div>
</div>
var flag = false;
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.fileUploaderInstance = {};
    $scope.onInitialized = function (e) {
        $scope.fileUploaderInstance = e.component;
    };
    $scope.clickHandler = function (e) {
        if (flag === false) {
            $scope.fileUploaderInstance.on(
                "uploadStarted", function (e) {
                    DevExpress.ui.notify("File uploading is started", "success", 1000);
                            }
            );
            e.component.option("text", "Unsubscribe from UploadStarted event");
            flag = true;
        } else {
            $scope.fileUploaderInstance.off("uploadStarted");
            e.component.option("text", "Subscribe to UploadStarted event");
            flag = false;
        }
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body {
  text-align: center;
}
.uploader {
  margin-top: 25px;
}
<div data-bind="dxButton: { text: 'Subscribe to UploadStarted event', onClick: clickHandler }"></div>
<div class="uploader" data-bind="dxFileUploader: {
    multiple: true,
    uploadMode: 'useButtons',
    onInitialized: onInitialized,
    uploadUrl: '/Content/Services/upload.aspx'
}"></div>
var flag = false;
var myViewModel = {
    fileUploaderInstance: {},
    onInitialized: function (e) {
        myViewModel.fileUploaderInstance = e.component;
    },
    clickHandler: function (e) {
        if (flag === false) {
            myViewModel.fileUploaderInstance.on(
                "uploadStarted", function (e) {
                                DevExpress.ui.notify("File uploading is started", "success", 1000);
                            }
            );
            e.component.option("text", "Unsubscribe from UploadStarted event");
            flag = true;
        } else {
            myViewModel.fileUploaderInstance.off("uploadStarted");
            e.component.option("text", "Subscribe to UploadStarted event");
            flag = false;
        }
    }
}
ko.applyBindings(myViewModel);
body {
  text-align: center;
}
.uploader {
  margin-top: 25px;
}
<div id="button"></div>
<div class="uploader" id="myFileUploader"></div>
var flag = false;
$("#myFileUploader").dxFileUploader({
    multiple: true,
    uploadMode: 'useButtons',
    uploadUrl: '/Content/Services/upload.aspx'
});
$("#button").dxButton({
    text: 'Subscribe to uploadStarted event',
    onClick: function (e) {
        if (flag === false) {
            $("#myFileUploader").dxFileUploader("instance").on(
                "uploadStarted", function (e) { DevExpress.ui.notify("File uploading is started", "success", 1000); }
            );
            e.component.option("text", "Unsubscribe from uploadStarted event");
            flag = true;
        } else {
            $("#myFileUploader").dxFileUploader("instance").off("uploadStarted");
            e.component.option("text", "Subscribe to uploadStarted event");
            flag = false;
        }
    }
});
body {
  text-align: center;
}
.uploader {
  margin-top: 25px;
}

valueChanged

Fires when a file or several files are added to or removed from selection.

Event Handler Argument:
e: Object
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
model: Object
Provides access to the data that is available for binding against the element. Available only in the Knockout approach.
value: Array
Newly selected files.
previousValue: Array
Previously selected files.
jQueryEvent: jQuery.Event
Specifies the jQuery event that caused action execution.

Instead, you can use the onValueChanged option to handle the event.

See Also
Show Example:
AngularJS
Knockout
jQuery
<div ng-controller="demoController">
    <div dx-button="{ text: 'Subscribe to ValueChanged event', onClick: clickHandler }"></div>
    <div class=" uploader" dx-file-uploader="{
        multiple: true,
        uploadMode: 'useButtons',
        onInitialized: onInitialized,
        uploadUrl: '/Content/Services/upload.aspx'
    }"></div>
</div>
var flag = false;
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.fileUploaderInstance = {};
    $scope.onInitialized = function (e) {
        $scope.fileUploaderInstance = e.component;
    };
    $scope.clickHandler = function (e) {
        if (flag === false) {
            $scope.fileUploaderInstance.on(
                "valueChanged", function (e) {
                                    DevExpress.ui.dialog.alert("Previous amount of files: <b>'" + e.previousValue.length + "'</b></br>" +
                                                                "New amount of files: <b>'" + e.value.length + "'</b>", "Info");
                                }
            );
            e.component.option("text", "Unsubscribe from ValueChanged event");
            flag = true;
        } else {
            $scope.fileUploaderInstance.off("valueChanged");
            e.component.option("text", "Subscribe to ValueChanged event");
            flag = false;
        }
    };
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
body {
  text-align: center;
}
.uploader {
  margin-top: 25px;
}
<div data-bind="dxButton: { text: 'Subscribe to ValueChanged event', onClick: clickHandler }"></div>
<div class="uploader" data-bind="dxFileUploader: {
    multiple: true,
    uploadMode: 'useButtons',
    onInitialized: onInitialized,
    uploadUrl: '/Content/Services/upload.aspx'
}"></div>
var flag = false;
var myViewModel = {
    fileUploaderInstance: {},
    onInitialized: function (e) {
        myViewModel.fileUploaderInstance = e.component;
    },
    clickHandler: function (e) {
        if (flag === false) {
            myViewModel.fileUploaderInstance.on(
                "valueChanged", function (e) {
                                    DevExpress.ui.dialog.alert("Previous amount of files: <b>'" + e.previousValue.length + "'</b></br>" + 
                                                                "New amount of files: <b>'" + e.value.length + "'</b>", "Info");
                                }
            );
            e.component.option("text", "Unsubscribe from ValueChanged event");
            flag = true;
        } else {
            myViewModel.fileUploaderInstance.off("valueChanged");
            e.component.option("text", "Subscribe to ValueChanged event");
            flag = false;
        }
    }
}
ko.applyBindings(myViewModel);
body {
  text-align: center;
}
.uploader {
  margin-top: 25px;
}
<div id="button"></div>
<div class="uploader" id="myFileUploader"></div>
var flag = false;
$("#myFileUploader").dxFileUploader({
    multiple: true,
    uploadMode: 'useButtons',
    uploadUrl: '/Content/Services/upload.aspx'
});
$("#button").dxButton({
    text: 'Subscribe to ValueChanged event',
    onClick: function (e) {
        if (flag === false) {
            $("#myFileUploader").dxFileUploader("instance").on(
                "valueChanged", function (e) {
                                    DevExpress.ui.dialog.alert("Previous amount of files: <b>'" + e.previousValue.length + "'</b></br>" +
                                                                "New amount of files: <b>'" + e.value.length + "'</b>", "Info");
                                }
            );
            e.component.option("text", "Unsubscribe from ValueChanged event");
            flag = true;
        } else {
            $("#myFileUploader").dxFileUploader("instance").off("valueChanged");
            e.component.option("text", "Subscribe to ValueChanged event");
            flag = false;
        }
    }
});
body {
  text-align: center;
}
.uploader {
  margin-top: 25px;
}