Search results

Add additional data on upload

The uploader component allows you to add additional data on file upload, which is used to get in the server-side. By using the uploading event and its customFormData argument, you can achieve this behavior. Refer to the following example.

In the following code snippet, explains about how to add additional data on file upload.

import { UploaderComponent, UploadingEventArgs } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";

export default class App extends React.Component<{}, {}> {
  public uploadObj: UploaderComponent;
  public path: object = {
      removeUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove',
      saveUrl: 'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save'
  }
  private dropAreaRef: HTMLElement;
  public onCreated(): void {
      this.uploadObj.dropArea = this.dropAreaRef;
      this.uploadObj.dataBind();
  }
  public onFileUpload(args: UploadingEventArgs) {
    // add addition data as key-value pair.
    args.customFormData = [{'name': 'Syncfusion INC'}];
  }
    public render(): JSX.Element {
        return (
            <div className = 'control-pane' ref={dropAreaEle => this.dropAreaRef = dropAreaEle!}>
            <div className='control-section row uploadpreview'>
            <div className='col-lg-9'>
            <div className='upload_wrapper'>
                {/* Render Uploader */}
                <UploaderComponent id='fileUpload' type='file' ref = {upload => {this.uploadObj = upload !}}
                asyncSettings = {this.path}
                uploading={this.onFileUpload = this.onFileUpload.bind(this)} created={this.onCreated = this.onCreated.bind(this)} />
            </div>
            </div>
            </div>
  </div>);
    }
}

ReactDOM.render(<App />, document.getElementById('fileupload'));

Server side for adding additional data

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