Angular File Uploader - Async Upload

In this demo, the FileUploader component is configured for asynchronous upload. Use the File types drop-down menu to select acceptable file types for the Open file dialog. The Upload mode drop-down menu allows you to specify whether the file is uploaded on a button click or instantly after the file has been selected. In addition, you can specify whether the FileUploader allows multiple file selection.

Backend API

<div class="widget-container"> <dx-file-uploader #fileUploader uploadUrl="https://js.devexpress.com/Demos/NetCore/FileUploader/Upload" [multiple]="false" accept="*" [(value)]="value" uploadMode="instantly" ></dx-file-uploader> <div class="content"> @if (value.length > 0) { <div> <h4>Selected Files</h4> </div> } @for (file of value; track file.name) { <div> <div class="selected-item"> Name: <span>{{ file.name }}</span ><br /> Size: <span>{{ file.size }}</span >bytes<br /> Type: <span>{{ file.type }}</span ><br /> Last Modified Date: <span>{{ file.lastModified | demodate }}</span> </div> </div> } </div> </div> <div class="options-panel"> <div class="caption">Options</div> <div class="option"> <span>File types</span> <dx-select-box [dataSource]="[ { name: 'All types', value: '*' }, { name: 'Images', value: 'image/*' }, { name: 'Videos', value: 'video/*' } ]" valueExpr="value" [inputAttr]="{ 'aria-label': 'File Type' }" displayExpr="name" [(value)]="fileUploader.accept" ></dx-select-box> </div> <div class="option"> <span>Upload mode</span> <dx-select-box [items]="['instantly', 'useButtons']" [(value)]="fileUploader.uploadMode" ></dx-select-box> </div> <div class="option"> <dx-check-box text="Allow multiple files selection" [(value)]="fileUploader.multiple" ></dx-check-box> </div> </div>

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, enableProdMode, Pipe, PipeTransform, provideZoneChangeDetection } from '@angular/core'; import { DxCheckBoxModule, DxFileUploaderModule, DxSelectBoxModule } from 'devextreme-angular'; import 'anti-forgery'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Pipe({ name: 'demodate', standalone: true }) export class DemoDatePipe implements PipeTransform { transform(date: number) { return new Date(date); } } if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], imports: [ DxCheckBoxModule, DxFileUploaderModule, DxSelectBoxModule, DemoDatePipe, ], }) export class AppComponent { value: File[] = []; } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

::ng-deep .widget-container { margin-right: 320px; } ::ng-deep .content h4 { margin-bottom: 10px; font-weight: 500; font-size: 18px; } ::ng-deep .content { margin-top: 50px; margin-left: 10px; } ::ng-deep .selected-item { margin-bottom: 20px; } ::ng-deep #selected-files { display: none; } .options-panel { padding: 20px; background-color: rgba(191, 191, 191, 0.15); position: absolute; right: 0; top: 0; bottom: 0; width: 260px; } .caption { font-size: 18px; font-weight: 500; } .option { margin-top: 10px; }

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> <script src="https://cdn.jsdelivr.net/npm/zone.js@0.16.2/bundles/zone.umd.js"></script> <script src="./bundle.js" type="module"></script> </body> </html>

To select files, click the Select file button or drop the files directly on the component. If the upload mode is «useButtons», you must click the Upload button or a corresponding button for each file to initiate upload.

This demo does not actually upload files. To upload files, assign the URL of a page providing server scenarios for saving uploaded files to the uploadUrl configuration property of the component.