Angular 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

    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 { }
  • HTML form upload

    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 { }
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.
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.

View Demo

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

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:

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

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.

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