dxFileUploader

The dxFileUploader widget enables an end user to specify a file or several files to be uploaded to the server, and upload them synchronously or asynchronously. The widget is based on an input element with the type attribute set to "file".

View Demo

Watch Video

Enable Multiple Selection

By default, the widget enables an end user to select only a single file at a time. You can change the default behavior assigning true to the multiple option. This enables a user to select multiple files at once. In this case, you can access the collection of selected files using the values option.

JavaScript
var fileUploaderOptions = {
    multiple: true
}

Specify Accepted File Types

The widget also enables you to prevent an end user from uploading undesirable file types. Use the accept option to specify the file types accepted by the file selection dialog.

JavaScript
var fileUploaderOptions = {
    accept: "image/*"
}

The value of this option is passed to the accept attribute of the underlying input element. Thus, the option supports the same values as the attribute. Refer to input element documentation for information on available values.

Access Selected Files

You can obtain additional information on selected files. This information is represented by an object containing the following fields (not supported by Internet Explorer 8).

  • lastModifiedDate
    Specifies the date and time of the last selected file modification.

  • name
    Specifies the selected file name.

  • size
    Specifies the selected file size in bytes.

  • type
    Specifies the MIME type of the selected file.

NOTE: If your application is running on Internet Explorer 8, the info object includes only the name field, which contains the selected file name.

If the multiple mode is disabled, you can access file information using the value option, which holds the described object. Otherwise, the widget holds an array of such objects in the values option.

Uploading Files

For uploading files, the dxFileUploader widget requires a web service that saves uploaded files on a server. The service URL is passed to the action attribute of a web form or to the uploadUrl option of the widget depending on the upload mode you use. You also should specify the name option whose value is required to access the uploaded file within a web service.

JavaScript
var fileUploaderOptions = {
    uploadMode: "useButtons",
    name: "myFileUploader",
    uploadUrl: "/services/upload.aspx",
}

The dxFileUploader widget can upload files synchronously (using a web form) or asynchronously (using FormData and AJAX), depending on the selected upload mode. The upload mode is specified using the uploadMode option, which accepts the following values.

  • "instantly"
    Asynchronous upload. Starts uploading instantly as files are selected.

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

  • "useForm"
    Synchronous upload. Uploads the specified files when the Submit button of the current form is clicked.

Asynchronous Uploading

If the upload mode option value is set to "instantly" or "useButtons", the widget uploads selected files asynchronously using FormData and AJAX.

JavaScript
var fileUploaderOptions = {
    uploadMode: "instantly"
}

NOTE: Internet Explorer 8 and 9 support only synchronous uploading because they do not support FormData.

The asynchronous uploading requires you to assign a URL of a web service saving uploaded files to the uploadUrl option.

JavaScript
var fileUploaderOptions = {
    uploadMode: "instantly",
    uploadUrl: "/services/upload",
}

If the uploadMode option is set to "instantly", files are uploaded instantly after they are selected. If the option value is "useButtons", an end user should click the Upload button to upload all files at once, or a corresponding button for each file to upload them one by one.

Synchronous Uploading

If the upload mode option value is set to "useForm", the widget uploads selected files synchronously using a web form.

JavaScript
var fileUploaderOptions = {
    uploadMode: "useFrom"
}

In this case, the widget should be enclosed in the form element.

    <!--JavaScript-->
    $("#fileUploader").dxFileUploader({
        uploadMode: "useFrom"
    });
    $("#submitButton").dxButton({
        text: "Upload",
        onClick: function() {
            $("form").submit();
        }
    });
HTML
<form method="post" enctype="multipart/form-data" action="/services/upload.aspx">
    <div id="fileUploader"></div>
    <div id="submitButton"></div>
</form>
Angular Approach
JavaScript
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.submitForm = function(){
        $("form").submit();
    }
});
HTML
<form method="post" enctype="multipart/form-data" action="/services/upload.aspx">
    <div dx-file-uploader="{
         uploadMode: 'useForm'
    }"></div>
    <div dx-button="{
         text: 'Upload',
         onClick: submitForm
    }"></div>
</form>
Knockout Approach
JavaScript
var myViewModel = {
    submitForm: function(){
        $("form").submit();
    }
}
ko.applyBindings(myViewModel);
HTML
<form method="post" enctype="multipart/form-data" action="/services/upload.aspx">
    <div data-bind="dxFileUploader: {
         uploadMode: 'useForm'
    }"></div>
    <div data-bind="dxButton: {
         text: 'Upload',
         onClick: submitForm
    }"></div>
</form>