How to upload files programmatically in Angular File Upload

25 Sep 20263 minutes to read

Upload files programmatically using the upload method. Retrieve the selected files using the public getFilesData method.

To call these methods, first obtain the Angular File Upload instance using the @ViewChild decorator, where the selector must match the template reference variable assigned to the ejs-uploader element (for example, #defaultupload).

Programmatic upload is useful when autoUpload is set to false. In that case, selected files are not uploaded automatically and must be uploaded manually via the upload method.

The upload method behaves differently based on its arguments.

  • If this method receives a specific file (or array of files) as an argument, only those files start to upload. For example, passing getFilesData()[0] uploads the first selected file.
  • If called with no argument, all the selected files will start to upload. Passing the full getFilesData() array as the argument produces the same result.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { UploaderModule } from '@syncfusion/ej2-angular-inputs'



import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { UploaderComponent } from '@syncfusion/ej2-angular-inputs';
@Component({
imports: [
         UploaderModule
    ],


standalone: true,
    selector: 'app-root',
    templateUrl: './default.html',
    styleUrls: ['./index.css']
})

export class AppComponent {
    @ViewChild('defaultupload')
    public uploadObj?: UploaderComponent;
    public autoUpload: boolean = false;
    public path: Object = {
        saveUrl: 'https://services.syncfusion.com/angular/production/api/FileUploader/Save',
        removeUrl: 'https://services.syncfusion.com/angular/production/api/FileUploader/Remove'
    };
    ngAfterViewInit(): void {
        (document.getElementById('first') as HTMLElement).onclick = (args) => {
            (this.uploadObj as UploaderComponent).upload((this.uploadObj as UploaderComponent).getFilesData()[0]);
        };
        (document.getElementById('full') as HTMLElement).onclick = (args) => {
            this.uploadObj?.upload((this.uploadObj as UploaderComponent).getFilesData());
        };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

You can also explore the Angular File Upload feature tour page for its groundbreaking features. Explore our Angular File Upload example to understand how to browse and select the files which you want to upload to the server.