Overview

The FileUploader widget enables an end user to upload files to the server. An end user can select files in the file explorer or drag and drop files to the FileUploader area on the page.

View Demo Watch Video

The following code adds the FileUploader to your page. To restrict the file types that can be uploaded to the server, the accept option is used. Since this option is, basically, the "accept" attribute of the underlying <input> element, it accepts the same values described here.

HTML
<div id="fileUploaderContainer"></div>
JavaScript
$(function() {
    $("#fileUploaderContainer").dxFileUploader({
        accept: "image/*"
    });
});

By default, a user is allowed to upload only one file at a time. To allow uploading several files at once, set the multiple option to true.

JavaScript
$(function() {
    $("#fileUploaderContainer").dxFileUploader({
        multiple: true
    });
});

If you need to access the selected files at runtime, get the value of the value option using the following command. It returns an array, whose members are each an instance implementing the File interface.

JavaScript
var files = $("#fileUploaderContainer").dxFileUploader("option", "value");

The FileUploader can operate in two different modes, each demanding different client- and server-side configuration. For details, see the Client-Side Settings article.

See Also