Configuration

An object defining configuration options for the FileUploader widget.

accept

Specifies a file type or several types accepted by the widget.

Type: String
Default Value: ''

The value of this option is passed to the accept attribute of the underlying input element. Thus, the option accepts a MIME type or several types separated by a comma. Refer to the input element documentation for information on available values.

Show Example:
AngularJS
Knockout
jQuery

accessKey

Specifies a shortcut key that sets focus on the widget element.

Type: String
Default Value: null

The accessKey option value is passed to the accesskey attribute of the actual HTML element of the widget.

activeStateEnabled

A Boolean value specifying whether or not the widget changes its state when interacting with a user.

Type: Boolean
Default Value: false

This option is used when the widget is displayed on a platform whose guidelines include the active state change for widgets.

allowCanceling

Specifies if an end user can remove a file from the selection and interrupt uploading.

Type: Boolean
Default Value: true

If this option is set to true, a cancel button is displayed for each selected file.

NOTE
This option applies only if the uploadMode is not set to 'useForm'.

buttonText

Deprecated

Use the selectButtonText option instead.

disabled

A Boolean value specifying whether or not the widget can respond to user interaction.

Type: Boolean
Default Value: false

Create an observable variable and assign it to this option to specify the availability of the widget at runtime.

focusStateEnabled

Specifies whether or not the widget can be focused.

Type: Boolean
Default Value: false
Default for generic: true

height

Specifies the height of the widget.

Type: Number|String| function
Return Value: Number|String
The widget height.
Default Value: undefined

The option can hold a value of the following types.

  • number
    The height of the widget in pixels

  • string
    A CSS measurement of the widget height (e.g., "55px", "80%", "auto" and "inherit")

  • function
    A function returning the widget height, e.g.,

    JavaScript
    height: function () {
        return baseHeight - 10 + "%";
    });

hint

Specifies the text of the hint displayed for the widget.

Type: String
Default Value: undefined

hoverStateEnabled

A Boolean value specifying whether or not the widget changes its state when being hovered by an end user.

Type: Boolean
Default Value: false

isValid

Specifies whether the editor's value is valid.

Type: Boolean
Default Value: true

In Knockout approach, you may need to use an editor to inform end users that an error occurred during the validation of a ViewModel field. In this instance, set the editor's isValid option to the isValid property value of the dxValidator that validated the ViewModel's field. In addition, set the editor's validationError option to the validationError property value of the dxValidator object.

In the code below, the login specified by an end user is validated on the level of the ViewModel. If validation of the login value fails, a validation message is displayed on the Login editor.

HTML
<div data-bind="dxTextBox: {
    value: login,
    isValid: login.dxValidator.isValid,
    validationError: login.dxValidator.validationError,
    placeholder: 'Login'
}"></div>
JavaScript
var viewModel = {
    login: ko.observable("").extend({
        dxValidator: {
            validationRules: [{
                type: 'required',
                message: 'Login is required'
            }]
        }
    }),
    //...
}
NOTE
The editor's isValid option, as well as the validationError option, should also be specified when using a custom validation engine. In this instance, the validation result will be displayed for the editor by the means of the DevExtreme Validation UI.
See Also

labelText

Specifies the text displayed on the area to which an end-user can drop a file.

Type: String
Default Value: 'or Drop file here'

Show Example:
AngularJS
Knockout
jQuery

multiple

Specifies whether the widget enables an end-user to select a single file or multiple files.

Type: Boolean
Default Value: false

Show Example:
AngularJS
Knockout
jQuery

name

Specifies the value passed to the name attribute of the underlying input element.

Type: String
Default Value: ''

onDisposing

A handler for the disposing event.

Type: function
Function parameters:
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.
Default Value: null

Assign a function to perform a custom action when the widget is being removed.

NOTE
The function assigned to this option is executed only if the widget is removed using the remove(), empty(), or html() jQuery methods.

onInitialized

A handler for the initialized event.

Type: function
Function parameters:
Provides function parameters.
Object structure:
component: Object
Provides access to the widget instance.
element: jQuery
An HTML element of the widget.
Default Value: null

Assign a function to perform a custom action when the widget is initialized.

onOptionChanged

A handler for the optionChanged event.

Type: function
Function parameters:
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.
Default Value: null

Assign a function to perform a custom action after an option of the component is changed.

onProgress

A handler for the uploaded event.

Type: function
Function parameters:
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.
Default Value: null

Assign a function to perform a custom action when a segment of a file has been uploaded.

onUploadAborted

A handler for the uploadAborted event.

Type: function
Function parameters:
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.
Default Value: null

Assign a function to perform a custom action when file uploading has been aborted.

onUploaded

A handler for the uploaded event.

Type: function
Function parameters:
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.
Default Value: null

Assign a function to perform a custom action when a file has been uploaded.

onUploadError

A handler for the uploadError event.

Type: function
Function parameters:
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.
Default Value: null

Assign a function to perform a custom action when an error has occurred during uploading.

The following code shows how you can handle a network error.

JavaScript
$(function(){
    $("#fileUploader").dxFileUploader({
        // ...
        onUploadError: function(e){
            var xhttp = e.request;
            if (xhttp.readyState == 4 && xhttp.status == 0) {
                console.log("Connection refused.");
            }
        }
    });
});

onUploadStarted

A handler for the uploadStarted event.

Type: function
Function parameters:
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.
Default Value: null

Assign a function to perform a custom action when file uploading is started.

onValueChanged

A handler for the valueChanged event.

Type: function
Function parameters:
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.
Default Value: null

Assign a function to perform a custom action when a file or several files are added to or removed from selection.

progress

Gets the current progress in percentages.

Type: Number
Default Value: 0

readOnly

A Boolean value specifying whether or not the widget is read-only.

Type: Boolean
Default Value: false

readyToUploadMessage

The message displayed by the widget when it is ready to upload the specified files.

Type: String
Default Value: 'Ready to upload'

This option makes sense only if the uploadMode option is set to "useButtons".

rtlEnabled

Specifies whether or not the current component supports a right-to-left representation.

Type: Boolean
Default Value: false

If you need to switch the display of this DevExtreme component to right-to-left, enable a specifically designed configuration option - rtlEnabled. When this option is set to true, the text flows from right to left, and the layout the component's elements is reversed. To switch the entire application/site to a right-to-left representation, use the static DevExpress.rtlEnabled field.

selectButtonText

The text displayed on the button that opens the file browser.

Type: String
Default Value: 'Select File'

Show Example:
AngularJS
Knockout
jQuery

showFileList

Specifies whether or not the widget displays the list of selected files.

Type: Boolean
Default Value: true

tabIndex

Specifies the widget tab index.

Type: Number
Default Value: 0

uploadButtonText

The text displayed on the button that starts uploading.

Type: String
Default Value: 'Upload'

The option makes sense only if the uploadMode option is set to "useButtons" or "instantly".

uploadedMessage

The message displayed by the widget when uploading is finished.

Type: String
Default Value: 'Uploaded'

The option makes sense only if the uploadMode option is set to "useButtons" or "instantly".

uploadFailedMessage

The message displayed by the widget on uploading failure.

Type: String
Default Value: 'Upload failed'

The option makes sense only if the uploadMode option is set to "useButtons" or "instantly".

uploadHeaders

Specifies headers for the upload request.

Type: Object
Default Value: {}

uploadMethod

Specifies the method for the upload request.

Type: String
Default Value: 'POST'
Accepted Values: 'POST' | 'PUT'

The option makes sense only if the uploadMode option is set to "useButtons" or "instantly".

uploadMode

Specifies how the widget uploads files.

Type: String
Default Value: 'instantly'
Accepted Values: 'instantly' | 'useButtons' | 'useForm'

The option accepts the following values.

  • instantly
    Starts uploading instantly as files are selected.

  • useButtons
    Starts uploading when a user clicks the "Upload" button.

  • useForm
    Uploads the specified files when the submit button of the current form is clicked. In this case, the FileUploader widget should be enclosed in the form element.

uploadUrl

Specifies a target Url for the upload request.

Type: String
Default Value: '/'

The option makes sense only if the uploadMode option is set to "useButtons" or "instantly".

validationError

Holds the object that defines the error that occurred during validation.

Type: Object
Default Value: undefined

In Knockout approach, you may need to use an editor to inform end users that an error occurred during the validation of a ViewModel field. In this instance, set the editor's isValid option to the isValid property value of the dxValidator that validated the ViewModel's field. In addition, set the editor's validationError option to the validationError property value of the dxValidator object.

In the code, the login specified by an end user is validated on the level of the ViewModel. If validation of the login value fails, a validation message is displayed on the Login editor.

HTML
<div data-bind="dxTextBox: {
    value: login,
    isValid: login.dxValidator.isValid,
    validationError: login.dxValidator.validationError,
    placeholder: 'Login'
}"></div>
JavaScript
var viewModel = {
    login: ko.observable("").extend({
        dxValidator: {
            validationRules: [{ type: 'required', message: 'Login is required' }]
        }
    }),
    //...
}

The editor's validationError option, as well as the isValid option, should also be specified when using a custom validation engine. In this instance, the validation result will be displayed for the editor by the means of the DevExtreme Validation UI.

See Also

value

A read-only option that holds a File instance representing the selected file.

Type: Array
Default Value: []

Internet Explorer 8 does not support File API. That is why in Internet Explorer 8, the value option holds an object containing only the name field, which specifies the selected file name.

JavaScript
{ name: 'MyFile.dat' }

values

Deprecated

Use the value option instead.

visible

A Boolean value specifying whether or not the widget is visible.

Type: Boolean
Default Value: true

width

Specifies the width of the widget.

Type: Number|String| function
Return Value: Number|String
The widget width.
Default Value: undefined

The option can hold a value of the following types.

  • numeric
    The widget width in pixels.
  • string
    A CSS measurement of the widget width (e.g., "55px", "80%", "auto" and "inherit").
  • function
    The function returning the widget width. For example, see the following code.

    JavaScript
    width: function () { 
        return baseWidth - 10 + "%";
    }