• html
• ts

<div class="control-section">
    <div class="col-lg-9">
        <div class="control_wrapper">
            <ejs-uploader #defaultupload id='defaultfileupload' [asyncSettings]='path' [dropArea]='dropElement' (removing)='onFileRemove($event)'></ejs-uploader>
        </div>
    </div>
</div>

import { Component, ViewChild, ViewEncapsulation, Inject } from '@angular/core';
import { EmitType, detach } from '@syncfusion/ej2-base';
import { UploaderComponent, RemovingEventArgs } from '@syncfusion/ej2-angular-inputs';
import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild('defaultupload')
    public uploadObj: UploaderComponent;

    public path: Object = {
        saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Save',
        removeUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Remove'
    };
    public dropElement: HTMLElement = document.getElementsByClassName('control-fluid')[0] as HTMLElement;
    public onFileRemove(args: RemovingEventArgs): void {
        args.postRawFile = false;
    }
    constructor() {
        
    }
}

Resumable upload

A built-in feature is available to pause, resume, retry, and cancel a file upload in Angular. This helps users upload high-resolution images, videos,and other large files safely. Additionally, it provides an option to pause and resume automatically based on server connection.

• Resumable upload documentation

Custom file upload button

The action buttons of the Angular File Upload component are completely customizable, including its file list, which helps create your own design for the File Upload UI.

• Custom file upload button documentation

File types (file extensions)

Upload various file types and limit the file types from client-side, which is mandatory before uploading a file to the web application.

• File type documentation

Progress bar

The File Upload component in Angular displays a built-in progress bar (progress indicator) with the progress percentage during each file upload. The Uploader Progressbar is completely customizable.

• Custom progress bar documentation

Right-to-left (RTL)

The Angular File Upload component supports right-to-left rendering, which improves the user experience and accessibility for those who use RTL languages.

Web accessibility

• Fully supports WAI-ARIA accessibility, which allows the Angular File Upload component to be accessed by on-screen readers and assistive devices.
• Follows the WAI-ARIA Best Practices for implementing keyboard interaction.
• The UI element visuals, such as foreground color, background color, line spacing, text, and images, were designed based on the WCAG 2.0 standard.

Touch support

The Angular File Upload component provides the best user experience across phone, tablet, and desktop form factors.