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.
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
HTMLJavaScript<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
HTMLTypeScript<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
HTMLJavaScript<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
HTMLTypeScript<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 ], // ... })
See Also
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.
jQuery
$(function() { $("#fileUploaderContainer").dxFileUploader({ name: "file", uploadMode: "useButtons", // or "instantly" uploadUrl: "https://mydomain.com/MyUploadService", chunkSize: 400000 // 400 KB }); });
<div id="fileUploaderContainer"></div>
Angular
<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 property. For example, the following code adds an employee ID and an office number:
jQuery
$(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
<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
@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 UI components have underlying hidden inputs too. Use the UI component's name property to specify the input's name
attribute.
jQuery
<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
<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
@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) ) }
If you have technical questions, please create a support ticket in the DevExpress Support Center.