Add additional data on upload in EJ2 TypeScript File Upload

08 Sep 20261 minute to read

The Uploader component allows you to add additional data on file upload, which can be accessed on the server side. By handling the uploading event and its customFormData argument, you can achieve this behavior. The customFormData argument accepts an array of objects with key-value pairs that are sent as form data during the upload. Refer to the following example.

Client side

The following code snippet explains how to add additional data on file upload.

import { Uploader } from '@syncfusion/ej2-inputs';


let uploadObj: Uploader = new Uploader({
    asyncSettings: {
        saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',
        removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove'
    },
    uploading: onFileUpload

});
uploadObj.appendTo('#fileupload');

function onFileUpload(args: any) {
    // add additional 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 JavaScript File Upload feature tour page for its groundbreaking features. You can also explore our JavaScript File Upload example to understand how to browse the files which you want to upload to the server.