DevExtreme Vue - 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 on the page's FileUploader area.

View Demo Watch Video

The following code adds the FileUploader to your page. Use the accept option to restrict the file types that can be uploaded to the server. This option is like the underlying <input> element's "accept" attribute and accepts the same values described here.

jQuery
HTML
JavaScript
<div id="fileUploaderContainer"></div>
$(function() {
    $("#fileUploaderContainer").dxFileUploader({
        // ...
        accept: "image/*"
    });
});
Angular
HTML
TypeScript
<dx-file-uploader ...
    accept="image/*">
</dx-file-uploader>
import { DxFileUploaderModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxFileUploaderModule
    ],
    // ...
})

A user is allowed to upload only one file at a time by default. Set the multiple option to true to allow uploading several files at once.

jQuery
JavaScript
$(function() {
    $("#fileUploaderContainer").dxFileUploader({
        multiple: true
    });
});
Angular
HTML
TypeScript
<dx-file-uploader ...
    [multiple]="true">
</dx-file-uploader>
import { DxFileUploaderModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxFileUploaderModule
    ],
    // ...
})

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");

With Angular, AngularJS, or Knockout, use a different technique. Bind the value property of the FileUploader widget to a component property (in Angular), a scope property (in AngularJS), or an observable variable (in Knockout). After that, you can access the file array within any method.

Angular
TypeScript
HTML
import { DxFileUploaderModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
    value: any[] = [];
    getSelectedFiles () {
        return this.value;
    }
}
@NgModule({
    imports: [
        // ...
        DxFileUploaderModule
    ],
    // ...
})
<dx-file-uploader ...
    [(value)]="value">
</dx-file-uploader>
AngularJS
JavaScript
HTML
angular.module('DemoApp', ['dx'])
    .controller('DemoController', function DemoController($scope) {
        $scope.value = [];
        $scope.getSelectedFiles = function () {
            return $scope.value;
        }
    });
<div dx-file-uploader="{ 
    ...
    bindingOptions: {
        value: 'value'
    }
}"></div>
Knockout
JavaScript
HTML
var viewModel = {
    value: ko.observableArray(),
    getSelectedFiles: function () {
        return viewModel.value();
    }
};

ko.applyBindings(viewModel);
<div data-bind="dxFileUploader: { 
    ...
    value: value
}"></div>

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

See Also