DevExtreme React - Client-Side Settings

Upload Mode

Depending on the uploadMode you choose, the FileUploader widget uploads files using an HTML form or FormData interface and a series of Ajax requests. The uploadMode option accepts one of the following values:

  • "instantly" (default)
    Ajax upload. Files are uploaded after they are selected.

  • "useButtons"
    Ajax upload. Files are uploaded after a user clicks the Upload button.

  • "useForm"
    HTML form upload. Files are uploaded when the HTML form is submitted.

View Demo

NOTE
Because Internet Explorer 9 does not support the FormData interface, you can only upload files using the HTML form in this browser.

The following examples show how to configure the FileUploader for uploading files using Ajax requests and an HTML form. Note that in both cases, the name option is specified to access the 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: "/upload.php"
    });
});
    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="/upload.php">
</dx-file-uploader>
    import { DxFileUploaderModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxFileUploaderModule
    ],
    // ...
})

  • HTML form upload

    jQuery
    HTML
    JavaScript
    <form action="/upload.php" 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="/upload.php" 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.
See Also

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: "/upload.php",
        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 = "/upload.php";
    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="/upload.php" 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="/upload.php" 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)
    )
}