React FileUploader Props

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.

View Demo

The value of this option will be passed to the accesskey attribute of the HTML element that underlies the widget.

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

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

You can configure this option in an ASP.NET MVC Control as follows:

@(Html.DevExtreme().WidgetName()
    .ElementAttr("class", "class-name")
    // ===== or =====
    .ElementAttr(new {
        @id = "elementId",
        @class = "class-name"
    })
    // ===== or =====
    .ElementAttr(new Dictionary<string, object>() {
        { "id", "elementId" },
        { "class", "class-name" }
    })

)

@(Html.DevExtreme().WidgetName() _
    .ElementAttr("class", "class-name")
    ' ===== or =====
    .ElementAttr(New With {
        .id = "elementId",
        .class = "class-name"
    })
    ' ===== or =====
    .ElementAttr(New Dictionary(Of String, Object) From {
        { "id", "elementId" },
        { "class", "class-name" }
    })
)

This option accepts a value of one of the following types:

• Number
  The height in pixels.

• String
  A CSS-accepted measurement of height. For example, "55px", "80%", "auto", "inherit".

• Function
  A function returning either of the above. For example:

  JavaScript

  height: function() {
      return window.innerHeight / 1.5;
  }

In Knockout apps, you may need to inform a user about an error that occurred during the validation of a view model field. For this purpose, set the editor's isValid option to the isValid value of the dxValidator that validates this field. To show an error message, set the editor's validationError option to the dxValidator's validationError value.

var editorValue = ko.observable("").extend({
    dxValidator: {
        validationRules: [{
            type: 'required',
            message: 'Specify this value'
        }]
    }
});
var viewModel = {
    editorOptions: {
        value: editorValue,
        isValid: editorValue.dxValidator.isValid,
        validationError: editorValue.dxValidator.validationError
    }
};

The editor's isValid and validationError options 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

• Knockout Only - Validate a View Model
• Use a Custom Validation Engine

You cannot access widget elements in this handler because it is executed before they are ready. Use the onContentReady handler instead.

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

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

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

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.

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

export class AppComponent {
    handleNetworkError (e) {
        var xhttp = e.request;
        if (xhttp.readyState == 4 && xhttp.status == 0) {
            console.log("Connection refused.");
        }      
    }
}

<dx-file-uploader ...
    (onUploadError)="handleNetworkError($event)">
</dx-fileUploader>

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

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

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

When this option is set to true, the widget text flows from right to left, and the layout of elements is reversed. To switch the entire application/site to the right-to-left representation, assign true to the rtlEnabled field of the object passed to the DevExpress.config(config) method.

DevExpress.config({
    rtlEnabled: true
});

See Also

• Right-to-Left Support Demo: DataGrid | Navigation Widgets | Editors

The value of this option will be passed to the tabindex attribute of the HTML element that underlies the widget.

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

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

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

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

When using the widget as an ASP.NET MVC Control, specify this option using the UploadHttpMethod enum. This enum accepts the following values: POST and PUT.

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.

When using the widget as an ASP.NET MVC Control, specify this option using the FileUploadMode enum. This enum accepts the following values: Instantly, UseButtons and UseForm.

View Demo

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

See Also

• Use a Custom Validation Engine

This option accepts a value of one of the following types:

• Number
  The width in pixels.

• String
  A CSS-accepted measurement of width. For example, "55px", "80%", "auto", "inherit".

• Function
  A function returning either of the above. For example:

  JavaScript

  width: function() {
      return window.innerWidth / 1.5;
  }