How can I help you?
Validation in Angular Uploader component
26 Feb 202613 minutes to read
The Uploader component validates selected files by file extension and size using the allowedExtensions, minFileSize, and maxFileSize properties. Files can be validated before uploading to the server and excluded from the upload process if needed. You can also validate files by setting HTML attributes on the input element. Validation occurs during both file selection and drag-and-drop operations.
File type
You can restrict file uploads to specific file types using the allowedExtensions property. Specify extensions as a comma-separated collection (for example, .pdf,.doc,.docx). The Uploader filters selected or dropped files against the specified types and processes only matching files. You can also enable validation by setting the accept attribute on the input element.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { UploaderModule } from '@syncfusion/ej2-angular-inputs'
import { Component } from '@angular/core';
@Component({
imports: [
UploaderModule
],
standalone: true,
selector: 'app-root',
template: `
<ejs-uploader #defaultupload [asyncSettings]='path' allowedExtensions = '.jpg,.png'></ejs-uploader>
`
})
export class AppComponent {
public path: Object = {
saveUrl: 'https://services.syncfusion.com/angular/production/api/FileUploader/Save',
removeUrl: 'https://services.syncfusion.com/angular/production/api/FileUploader/Remove' };
constructor() {
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));File size
The Uploader component validates files based on their size, preventing uploads of files that are too large or too small. File size limits are specified in bytes using the minFileSize and maxFileSize properties. By default, the minimum file size is 0 bytes and the maximum file size is 28.4 MB.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { UploaderModule } from '@syncfusion/ej2-angular-inputs'
import { Component } from '@angular/core';
@Component({
imports: [
UploaderModule
],
standalone: true,
selector: 'app-root',
template: `
<ejs-uploader #defaultupload [asyncSettings]='path' minFileSize = 10000 maxFileSize = 1500000></ejs-uploader>
`
})
export class AppComponent {
public path: Object = {
saveUrl: 'https://services.syncfusion.com/angular/production/api/FileUploader/Save',
removeUrl: 'https://services.syncfusion.com/angular/production/api/FileUploader/Remove' };
constructor() {
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Maximum files count
You can limit the number of files that can be uploaded using the selected event. In the event arguments, retrieve the currently selected files using getFilesData(). Modify the file list as needed and assign the updated list to eventArgs.modifiedFilesData.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { UploaderModule } from '@syncfusion/ej2-angular-inputs'
import { Component, ViewChild } from '@angular/core';
import { FileInfo, SelectedEventArgs } from '@syncfusion/ej2-inputs';
import { detach } from '@syncfusion/ej2-base';
import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
import { UploaderComponent } from '@syncfusion/ej2-angular-inputs';
@Component({
imports: [
UploaderModule
],
standalone: true,
selector: 'app-root',
template: `
<ejs-uploader #defaultupload autoUpload='false' [asyncSettings]='path' minFileSize = 10000 allowedExtensions = '.doc, .docx, .xls, .xlsx' (selected)="onFileSelected($event)" (success)="onUploadSuccess($event)"></ejs-uploader>
`
})
export class AppComponent {
public path: Object = {
saveUrl: 'https://services.syncfusion.com/angular/production/api/FileUploader/Save',
removeUrl: 'https://services.syncfusion.com/angular/production/api/FileUploader/Remove' };
@ViewChild('defaultupload')
public uploadObj?: UploaderComponent;
public onFileSelected(args : SelectedEventArgs) : void {
// Filter the 5 files only to showcase
args.filesData.splice(5);
let filesData : FileInfo[] = (this.uploadObj as UploaderComponent).getFilesData();
let allFiles : FileInfo[] = filesData.concat(args.filesData);
if (allFiles.length > 5) {
for (let i : number = 0; i < allFiles.length; i++) {
if (allFiles.length > 5) {
allFiles.shift();
}
}
args.filesData = allFiles;
// set the modified custom data
args.modifiedFilesData = args.filesData;
}
args.isModified = true;
}
public onUploadSuccess(args: any): void {
let li: HTMLElement = (this.uploadObj as any).uploadWrapper.querySelector('[data-file-name="' + args.file.name + '"]');
if (args.operation === 'upload') {
(li.querySelector('.e-file-delete-btn') as HTMLElement).onclick = () => {
this.generateSpinner((this.uploadObj as any).uploadWrapper);
};
(li.querySelector('.e-file-delete-btn') as HTMLElement).onkeydown = (e: any) => {
if (e.keyCode === 13) {
this.generateSpinner(e.target.closest('.e-upload'));
}
};
} else {
hideSpinner((this.uploadObj as any).uploadWrapper);
detach((this.uploadObj as any).uploadWrapper.querySelector('.e-spinner-pane'));
}
}
public generateSpinner(targetElement: HTMLElement): void {
createSpinner({ target: targetElement, width: '25px' });
showSpinner(targetElement);
}
constructor() {
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Duplicate files
You can prevent duplicate file uploads using the selected event. Compare the selected files against the existing file list and remove any duplicates before processing the upload.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { UploaderModule } from '@syncfusion/ej2-angular-inputs'
import { Component, ViewChild } from '@angular/core';
import { FileInfo } from '@syncfusion/ej2-inputs';
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { UploaderComponent } from '@syncfusion/ej2-angular-inputs';
@Component({
imports: [
UploaderModule
],
standalone: true,
selector: 'app-root',
template: `
<ejs-uploader #defaultupload autoUpload='false' [asyncSettings]='path' (selected)="onFileSelect($event)" ></ejs-uploader>
`
})
export class AppComponent {
public path: Object = {
saveUrl: 'https://services.syncfusion.com/angular/production/api/FileUploader/Save',
removeUrl: 'https://services.syncfusion.com/angular/production/api/FileUploader/Remove' };
@ViewChild('defaultupload')
public uploadObj?: UploaderComponent;
public onFileSelect(args : any) {
let existingFiles: FileInfo[] = (this.uploadObj as any).getFilesData();
for (let i: number = 0; i < args.filesData.length; i++) {
for(let j: number = 0; j < existingFiles.length; j++) {
if (!isNullOrUndefined(args.filesData[i])) {
if (existingFiles[j].name == args.filesData[i].name) {
args.filesData.splice(i, 1);
}
}
}
}
existingFiles = existingFiles.concat(args.filesData);
args.modifiedFilesData = existingFiles;
args.isModified = true;
}
constructor() {
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));You can also explore Angular File Upload feature tour page for its groundbreaking features. You can also explore our Angular File Upload example to understand how to browse the files which you want to upload to the server.