The following examples show how to configure the FileUploader for each upload mode. Therein, the name option is required to access uploaded files on the server.

Ajax upload

jQuery

HTML

JavaScript

<div id="fileUploaderContainer"></div>

$(function() {
    $("#fileUploaderContainer").dxFileUploader({
        name: "file",
        // Uncomment the following line to allow a user to upload multiple files
        // multiple: true,
        uploadMode: "useButtons", // or "instantly"
        uploadUrl: "https://mydomain.com/MyUploadService"
    });
});

Angular

HTML

TypeScript

<dx-file-uploader
    name="file"
    <!-- Uncomment the following line to allow a user to upload multiple files -->
    <!-- [multiple]="true" -->
    uploadMode="useButtons" <!-- or "instantly" -->
    uploadUrl="https://mydomain.com/MyUploadService">
</dx-file-uploader>

import { DxFileUploaderModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxFileUploaderModule
    ],
    // ...
})

HTML form upload

jQuery

HTML

JavaScript

<form action="https://mydomain.com/MyUploadService" method="post" enctype="multipart/form-data">
    <div id="fileUploaderContainer"></div>
    <input type="submit">
</form>

$(function() {
    $("#fileUploaderContainer").dxFileUploader({
        name: "file",
        // Uncomment the following lines to allow a user to upload multiple files
        // multiple: true,
        // name: "files[]",
        uploadMode: "useForm"
    });
});

Angular

HTML

TypeScript

<form action="https://mydomain.com/MyUploadService" method="post" enctype="multipart/form-data">
    <dx-file-uploader
        name="file"
        <!-- Uncomment the following lines to allow a user to upload multiple files -->
        <!-- [multiple]="true" -->
        <!-- name="files[]" -->
        uploadMode="useForm">
    </dx-file-uploader>
    <input type="submit">
</form>

import { DxFileUploaderModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxFileUploaderModule
    ],
    // ...
})

NOTE

If you allow a user to upload multiple files using an HTML form, the name option's value must end with square brackets as shown in the commented-out code line in the example above.

Chunk Upload

Chunk upload allows large files to be divided into parts called "chunks" and sent via multiple requests. To enable this feature, specify the chunk size in bytes and set uploadMode to "instantly" or "useButtons" to send files via Ajax requests.

View Demo

jQuery

JavaScript

HTML

$(function() {
    $("#fileUploaderContainer").dxFileUploader({
        name: "file",
        uploadMode: "useButtons", // or "instantly"
        uploadUrl: "https://mydomain.com/MyUploadService",
        chunkSize: 400000 // 400 KB
    });
});

<div id="fileUploaderContainer"></div>

Angular

HTML

TypeScript

<dx-file-uploader
    name="file"
    uploadMode="useButtons" <!-- or "instantly" -->
    uploadUrl="https://mydomain.com/MyUploadService"
    [chunkSize]="400000"> <!-- 400 KB -->
</dx-file-uploader>

import { DxFileUploaderModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxFileUploaderModule
    ],
    // ...
})

On the server, you should process the received chunks and merge them into a file. See the Server-Side Implementation examples in ASP.NET and PHP.

Additional Parameters in a Request

If the uploadMode is "instantly" or "useButtons", you can add parameters to the URL by modifying the uploadUrl option. For example, the following code adds an employee ID and an office number:

jQuery

JavaScript

$(function () {
    var employee = { id: 1, name: "John Heart", position: "CEO", office: 614 };
    $("#fileUploaderContainer").dxFileUploader({
        name: "file",
        uploadMode: "instantly", // or "useButtons"
        uploadUrl: "https://mydomain.com/MyUploadService",
        onValueChanged: function (e) {
            var url = e.component.option("uploadUrl");
            url = updateQueryStringParameter(url, "id", employee.id);
            e.component.option("uploadUrl", url);
        }
    });
    $("#numberBoxContainer").dxNumberBox({
        value: employee.office,
        onValueChanged: function (e) {
            if ( e.value !== e.previousValue ) {
                var fileUploader = $("#fileUploaderContainer").dxFileUploader("instance");
                var url = fileUploader.option("uploadUrl");
                url = updateQueryStringParameter(url, "office", e.value);            
                fileUploader.option("uploadUrl", url);
            }
        }
    });
    function updateQueryStringParameter (uri, key, value) {
        var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
        var separator = uri.indexOf('?') !== -1 ? "&" : "?";
        if (uri.match(re)) {
            return uri.replace(re, '$1' + key + "=" + value + '$2');
        }
        else {
            return uri + separator + key + "=" + value;
        }
    }
});

Angular

HTML

TypeScript

<dx-file-uploader
    name="file"
    (onValueChanged)="addIdParameter($event)"
    [uploadUrl]="uploadUrl"
    uploadMode="instantly">    <!-- or "useButtons" -->
</dx-file-uploader>
<dx-number-box
    [(value)]="employee.office"
    (onValueChanged)="addOfficeParameter($event)">
</dx-number-box>

import { DxFileUploaderModule, DxNumberBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    employee = { id: 1, name: "John Heart", position: "CEO", office: 614 };
    uploadUrl = "https://mydomain.com/MyUploadService";
    addIdParameter (e) {
        this.uploadUrl = this.updateQueryStringParameter(this.uploadUrl, "id", this.employee.id);
        e.component.option("uploadUrl", this.uploadUrl);
    }
    addOfficeParameter (e) {
        if ( e.value !== e.previousValue ) {
            this.uploadUrl = this.updateQueryStringParameter(this.uploadUrl, "office", e.value);          
        }
    }
    updateQueryStringParameter (uri, key, value) {
        var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
        var separator = uri.indexOf('?') !== -1 ? "&" : "?";
        if (uri.match(re)) {
            return uri.replace(re, '$1' + key + "=" + value + '$2');
        }
        else {
            return uri + separator + key + "=" + value;
        }
    }
}
@NgModule({
    imports: [
        // ...
        DxFileUploaderModule,
        DxNumberBoxModule
    ],
    // ...
})

ASP.NET MVC Controls

Razor C#

@model DevExtremeMvcApp.Models.Employee

@(Html.DevExtreme().FileUploader()
    .ID("fileUploader")
    .Name("file")
    .UploadMode(FileUploadMode.Instantly) // or FileUploadMode.UseButtons
    .UploadUrl(Url.Action("UploadFile", "FileUploader", new { id = @Model.EmployeeID }))
)

@(Html.DevExtreme().NumberBox()
    .Value(@Model.Office)
    .OnValueChanged("numberBox_valueChanged")
)

<script type="text/javascript">
    function numberBox_valueChanged(e) {
        if (e.value !== e.previousValue) {
            var fileUploader = $("#fileUploader").dxFileUploader("instance");
            var url = fileUploader.option("uploadUrl");
            url = updateQueryStringParameter(url, "office", e.value);
            fileUploader.option("uploadUrl", url);
        }
    }
    function updateQueryStringParameter (uri, key, value) {
        var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
        var separator = uri.indexOf('?') !== -1 ? "&" : "?";
        if (uri.match(re)) {
            return uri.replace(re, '$1' + key + "=" + value + '$2');
        }
        else {
            return uri + separator + key + "=" + value;
        }
    }
</script>

When the uploadMode is "useForm", define the parameters within hidden inputs. They are sent to the server in an HTML form along with the files. Some DevExtreme widgets have underlying hidden inputs too. Use the widget's name option to specify the input's name attribute.

jQuery

HTML

JavaScript

<form id="form" action="https://mydomain.com/MyUploadService" method="post" enctype="multipart/form-data">
    <input type="hidden" id="employeeId" name="id">
    <div id="fileUploaderContainer"></div>
    <div id="numberBoxContainer"></div>
    <div id="button"></div>
</form>

$(function () {
    var employee = { id: 1, name: "John Heart", position: "CEO", office: 614 };
    $("#fileUploaderContainer").dxFileUploader({
        name: "file",
        uploadMode: "useForm",
        onValueChanged: function () {
            $("#employeeId").val(employee.id);
        }
    });
    $("#numberBoxContainer").dxNumberBox({
        name: "office",    
        value: employee.office
    });
    $("#button").dxButton({
        text: "Update profile",
        useSubmitBehavior: true
    });
});

Angular

HTML

TypeScript

<form action="https://mydomain.com/MyUploadService" method="post" enctype="multipart/form-data">
    <input type="hidden" name="id" [value]="employeeId">
    <dx-file-uploader
        name="file"
        uploadMode="useForm"
        (onValueChanged)="addParameters()">
    </dx-file-uploader>
    <dx-number-box
        [(value)]="employeeOffice"
        name="office"> 
    </dx-number-box>
    <dx-button
        text="Update profile"
        [useSubmitBehavior]="true">
    </dx-button>
</form>

import { DxFileUploaderModule, DxButtonModule, DxNumberBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    employee = { id: 1, name: "John Heart", position: "CEO", office: 614 };
    employeeId: any;
    employeeOffice = this.employee.office;
    addParameters () {
        this.employeeId = this.employee.id;
    }
}
@NgModule({
    imports: [
        // ...
        DxFileUploaderModule,
        DxButtonModule,
        DxNumberBoxModule
    ],
    // ...
})

ASP.NET MVC Controls

Razor C#

@model DevExtremeMvcApp.Models.Employee

@using (Html.BeginForm("UploadFile", "FileUploader", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @(Html.DevExtreme().FileUploader()
        .Name("file") 
        .UploadMode(FileUploadMode.UseForm)
    )

    @Html.HiddenFor(model => Model.EmployeeID);

    @(Html.DevExtreme().NumberBox()
        .Name("office")
        .Value(model => Model.Office)
    )

    @(Html.DevExtreme().Button()
        .Text("Update Profile")
        .UseSubmitBehavior(true)
    )
}

Feedback

Was this page helpful?

Thanks for your feedback!
Any other suggestions? Tell us here.

Additional Feedback

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

DevExtreme jQuery - Client-Side Settings

Upload Mode

jQuery

Angular

jQuery

Angular

See Also

Chunk Upload

jQuery

Angular

Additional Parameters in a Request

jQuery

Angular

ASP.NET MVC Controls

jQuery

Angular

ASP.NET MVC Controls