Angular File Uploader - Validation

This demo shows how to use the allowedFileExtensions and maxFileSize properties to limit the maximum size and specify file extensions that the FileUploader accepts. Note that demonstrated validation is client-side — you should implement the server-side validation. You can see an example under the FileUploaderController tab in the ASP.NET MVC version of this demo.

Backend API

<div class="main-block"> <div class="file-uploader-block"> <dx-file-uploader [multiple]="true" uploadMode="useButtons" uploadUrl="https://js.devexpress.com/Demos/NetCore/FileUploader/Upload" [allowedFileExtensions]="['.jpg', '.jpeg', '.gif', '.png']" > </dx-file-uploader> <span class="note" >Allowed file extensions: <span>.jpg, .jpeg, .gif, .png</span>.</span > </div> <div class="file-uploader-block"> <dx-file-uploader [multiple]="true" uploadMode="useButtons" uploadUrl="https://js.devexpress.com/Demos/NetCore/FileUploader/Upload" [maxFileSize]="4000000" > </dx-file-uploader> <span class="note">Maximum file size: <span>4 MB</span>.</span> </div> </div>

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core'; import { DxFileUploaderModule } from 'devextreme-angular'; import 'anti-forgery'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], imports: [ DxFileUploaderModule, ], }) export class AppComponent { } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

::ng-deep .file-uploader-block { width: 350px; float: left; } ::ng-deep .file-uploader-block + .file-uploader-block { float: right; } ::ng-deep .note { font-size: 10pt; color: var(--dx-texteditor-color-label); margin-left: 9px; } ::ng-deep .note > span { font-weight: 700; } ::ng-deep .main-block { max-width: 900px; min-width: 700px; }

<!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>