Add Additional Data on Upload in Angular Uploader Component

26 Feb 20261 minute to read

The Uploader lets you include additional form data with file uploads. Use the uploading event and set the customFormData argument to send extra key–value pairs to the server. See the example below.

import { Component } from '@angular/core';
import { EmitType } from '@syncfusion/ej2-base';
import { SelectedEventArgs } from '@syncfusion/ej2-angular-inputs';
@Component({
    selector: 'app-root',
    templateUrl: 'default.html',
    styleUrls: ['index.css']
})

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'
    };

    public onFileUpload: EmitType<SelectedEventArgs> = (args: any) =>  {
        // add addition data as key-value pair.
        args.customFormData = [{'name': 'Syncfusion INC'}];
    };
}

Server side for adding additional data

    // Get the additional data in server end by corresponding key.
    var data = HttpContext.Current.Request.Form["name"];

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.