React FileUploader - Client-Side Settings

Upload Mode

Depending on the uploadMode, the FileUploader UI component uses an HTML form or a FormData interface with a series of Ajax requests to upload files.

View Demo View on GitHub

The following examples show how to configure the FileUploader for each upload mode. Therein, the name property 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

app.component.html

app.component.ts

app.module.ts

<dx-file-uploader id="fileUploader"
    <!-- 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 { Component } from '@angular/core';    

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    //...
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxFileUploaderModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxFileUploaderModule
    ],
    //...
})
export class AppModule { }

Vue

App.vue

<template>
    <DxFileUploader
        <!-- Uncomment the following line to allow a user to upload multiple files -->
        <!-- :multiple="true" -->
        upload-mode="useButtons" <!-- or "instantly" -->
        upload-url="https://mydomain.com/MyUploadService">
    </DxFileUploader>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';     

import { 
    DxFileUploader
} from 'devextreme-vue/file-uploader';

export default {
    components: {
        DxFileUploader
    },

data() {
    return {
        //...
    };
}

};
</script>

React

App.js

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import FileUploader from 'devextreme-react/file-uploader';

class App extends React.Component {
    render() {
        return (
            <FileUploader 
                {/* Uncomment the following line to allow a user to upload multiple files */}
                {/* multiple={true} */}
                uploadMode="useButtons" {/* or "instantly" */} 
                uploadUrl="https://mydomain.com/MyUploadService">
            </FileUploader>
        );
    }
}
export default App;

ASP.NET Core Controls

Razor C#

@(Html.DevExtreme().FileUploader()
    // Uncomment the following line to allow a user to upload multiple files
    // .Multiple(true)
    .UploadMode(FileUploadMode.UseButtons) // or "instantly" 
    .UploadUrl("https://mydomain.com/MyUploadService")

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

app.component.html

app.component.ts

app.module.ts

<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 { Component } from '@angular/core';    

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    //...
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxFileUploaderModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxFileUploaderModule
    ],
    //...
})
export class AppModule { }

Vue

App.vue

<template>
    <form id="form"
        method="post"
        action="https://mydomain.com/MyUploadService"
        enctype="multipart/form-data">
        <DxFileUploader
            <!-- Uncomment the following line to allow a user to upload multiple files -->
            <!-- :multiple="true" -->
            <!-- name="files[]" -->
            upload-mode="useForm">
        </DxFileUploader>
        <input type="submit" >
    </form>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';     

import { 
    DxFileUploader
} from 'devextreme-vue/file-uploader';

export default {
    components: {
        DxFileUploader
    },

data() {
    return {
        //...
    };
}

};
</script>

React

App.js

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import FileUploader from 'devextreme-react/file-uploader';

class App extends React.Component {
    render() {
        return (
            <form id="form" 
                method="post" 
                action="https://mydomain.com/MyUploadService"
                enctype="multipart/form-data">
                <FileUploader 
                    {/* Uncomment the following line to allow a user to upload multiple files */}
                    {/* multiple={true} */}
                    {/* name="files[]" */}
                    uploadMode="useForm">
                </FileUploader>
                <input type="submit"/>
            </form>
        );
    }
}
export default App;

ASP.NET Core Controls

Razor C#

<form id="form" method="post" enctype="multipart/form-data" action="https://mydomain.com/MyUploadService">
    @(Html.DevExtreme().FileUploader()
        // Uncomment the following line to allow a user to upload multiple files
        // .Multiple(true)
        // .Name("files[]")
        .UploadMode(FileUploadMode.UseForm)
    )
</form>

NOTE

If you allow a user to upload multiple files using an HTML form, the name property'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

app.component.html

app.component.ts

app.module.ts

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

import { Component } from '@angular/core';    

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    //...
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxFileUploaderModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxFileUploaderModule
    ],
    //...
})
export class AppModule { }

Vue

App.vue

<template>
    <DxFileUploader
        name="file"
        :chunk-size="400000"
        upload-mode="useButtons" <!-- or "instantly" -->
        upload-url="https://mydomain.com/MyUploadService">
    </DxFileUploader>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';     

import { 
    DxFileUploader
} from 'devextreme-vue/file-uploader';

export default {
    components: {
        DxFileUploader
    },

    data() {
        return {
            //...
        };
    }
};
</script>

React

App.js

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import FileUploader from 'devextreme-react/file-uploader';

class App extends React.Component {
    render() {
        return (
            <FileUploader 
                name="file"
                chunkSize={400000}
                uploadMode="useButtons" {/* or "instantly" */} 
                uploadUrl="https://mydomain.com/MyUploadService">
            </FileUploader>
        );
    }
}
export default App;

ASP.NET Core Controls

Razor C#

@(Html.DevExtreme().FileUploader()
    .Name("file")
    .UploadMode(FileUploadMode.UseButtons) // or "instantly" 
    .UploadUrl("https://mydomain.com/MyUploadService")
    .ChunkSize(400000)
)

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 property. 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

app.component.html

app.component.ts

app.module.ts

<dx-file-uploader id="fileUploader"
    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 { Component } from '@angular/core';    

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

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;
        }
    }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxFileUploaderModule, DxNumberBoxModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxFileUploaderModule,
        DxNumberBoxModule
    ],
    //...
})
export class AppModule { }

Vue

App.vue

<template>
    <DxFileUploader
        name="file"
        @value-changed="addIdParameter"
        upload-mode="instantly" <!-- or "useButtons" -->
        upload-url="https://mydomain.com/MyUploadService">
    </DxFileUploader>
    <DxNumberBox
        :value="employee.office"
        @value-changed="addOfficeParameter"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';     

import { 
    DxFileUploader
} from 'devextreme-vue/file-uploader';
import { 
    DxNumberBox
} from 'devextreme-vue/number-box';

export default {
    components: {
        DxFileUploader,
        DxNumberBox
    },

    data() {
        return {
            //...
        };
    },

    methods: {
        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;
            }
        }
    }
};
</script>

React

App.js

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import FileUploader from 'devextreme-react/file-uploader';
import NumberBox from 'devextreme-react/number-box';

class App extends React.Component {
    render() {
        return (
            <FileUploader 
                name="file"
                onValueChanged={this.addIdParameter}
                uploadMode="instantly" {/* or "useButtons" */} 
                uploadUrl="https://mydomain.com/MyUploadService">
            </FileUploader>
            <DxNumberBox
                value={employee.office}
                onValueChanged="this.addOfficeParameter">
            </DxNumberBox>
        );
    }

    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;
        }
    }
}
export default App;

ASP.NET Core Controls

Razor C#

@model DevExtremeMvcApp.Models.Employee

@(Html.DevExtreme().FileUploader()
    .Name("file")
    .OnValueChanged("addIdParameter")
    .UploadMode(FileUploadMode.UseButtons) // or "instantly" 
    .UploadUrl("https://mydomain.com/MyUploadService")
)
@(Html.DevExtreme().NumberBox()
    .Value(employee.office)
    .OnValueChanged("addOfficeParameter")
)

<script type="text/javascript">

    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;
        }
    }

</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 UI components have underlying hidden inputs too. Use the UI component's name property 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

app.component.html

app.component.ts

app.module.ts

<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)="addIdParameter()">
    </dx-file-uploader>
    <dx-number-box
        [(value)]="employeeOffice"
        name="office"> 
    </dx-number-box>    
    <dx-button
        text="Update profile"
        [useSubmitBehavior]="true">
    </dx-button>
</form>

import { Component } from '@angular/core';    

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

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;
    }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxFileUploaderModule, DxButtonModule, DxNumberBoxModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxFileUploaderModule,
        DxButtonModule,
        DxNumberBoxModule
    ],
    //...
})
export class AppModule { }

Vue

App.vue

<template>
    <form id="form"
        method="post"
        action="https://mydomain.com/MyUploadService"
        enctype="multipart/form-data">
        <input type="hidden" name="id" value="employeeId">
        <DxFileUploader
            name="file"
            @valueChanged="addIdParameter"
            upload-mode="useForm" />
        <DxButton
            text="Update profile"
            :useSubmitBehavior="true" />
    </form>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';     

import DxFileUploader from 'devextreme-vue/file-uploader';
import DxNumberBox from 'devextreme-vue/number-box';
import DxButton from 'devextreme-vue/button';

const employee = { id: 1, name: "John Heart", position: "CEO", office: 614 };
const employeeId: any;
const employeeOffice = this.employee.office;

export default {
    components: {
        DxFileUploader,
        DxButton,
        DxNumberBox
    },

    data() {
        return {
            employee,
            employeeId,
            employeeOffice
        };
    },

    methods: {
        addParameters (e) {
            this.employeeId = this.employee.id;
        }
    }
};
</script>

React

App.js

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import FileUploader from 'devextreme-react/file-uploader';
import NumberBox from 'devextreme-react/number-box';
import Button from 'devextreme-react/button';

const App = () => {
    const addIdParameter = (e) => {
        employeeId = employee.id;
    };

    const employee = { id: 1, name: "John Heart", position: "CEO", office: 614 };
    const employeeId: any;
    const employeeOffice = employee.office;

    return (
        <form id="form" 
            method="post" 
            action="https://mydomain.com/MyUploadService"
            enctype="multipart/form-data">
            <FileUploader 
                name="file"
                onValueChanged={addIdParameter}
                uploadMode="useForm">
            </FileUploader>
            <Button
                text="Update profile"
                useSubmitBehavior={true}>
            </Button>
            <input type="hidden" name="id" value="employeeId" />
        </form>                
    );
};
export default App;

ASP.NET MVC Controls

Razor C#

<form id="form" method="post" enctype="multipart/form-data" action="https://mydomain.com/MyUploadService">
    @(Html.DevExtreme().FileUploader()
        .Name("file")
        .OnValueChanged("addIdParameter")
        .UploadMode(FileUploadMode.UseForm)
    )
    @(Html.DevExtreme().Button()
        .Text("Update profile")
        .UseSubmitBehavior(true)
    )
    <input type="hidden" name="id" value="employeeId">
</form>

<script>
    var employee = { id: 1, name: "John Heart", position: "CEO", office: 614 };
    var employeeId: any;
    var employeeOffice = employee.office;
    function addIdParameter(e) {
        employeeId = employee.id;
    }
</script>

Was this topic helpful?

Thank you!

Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

React FileUploader - Client-Side Settings

Upload Mode

jQuery

Angular

Vue

React

ASP.NET Core Controls

jQuery

Angular

Vue

React

ASP.NET Core Controls

See Also

Chunk Upload

jQuery

Angular

Vue

React

ASP.NET Core Controls

Additional Parameters in a Request

jQuery

Angular

Vue

React

ASP.NET Core Controls

jQuery

Angular

Vue

React

ASP.NET MVC Controls