Configuration

An object defining configuration options for the dxFileUploader 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.

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

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., 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

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' }]
        }
    }),
    //...
}

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:
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 and AngularJS approaches.

Default Value: null

onInitialized

A handler for the initialized event.

Type:

function

Function parameters:
e:

Object

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:
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 and AngularJS approaches.

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:
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 and AngularJS approaches.

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.

Default Value: null

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

onUploaded

A handler for the uploaded event.

Type:

function

Function parameters:
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 and AngularJS approaches.

file:

Object

An uploaded file.

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 has been uploaded.

onUploadError

A handler for the uploadError event.

Type:

function

Function parameters:
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 and AngularJS approaches.

file:

Object

An uploaded file.

jQueryEvent:

jQuery.Event

Specifies the jQuery event that caused action execution.

Default Value: null

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

onValueChanged

A handler for the valueChanged event.

Type:

function

Function parameters:
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 and AngularJS approaches.

value:

File

The newly selected file.

values:

Array

Files selected within the widget.

previousValue:

File

The previously selected file.

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".

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 dxFileUploader 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

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:

File

Default Value: null

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

Holds the File instances representing files selected in the widget.

Type:

Array

Default Value: []

Internet Explorer 8 does not support File API. That is why in Internet Explorer 8, the values option holds an array of objects that contains only the name field, which specifies the selected file name.

JavaScript
{ name: 'MyFile.dat' }

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 + "%";
    }