How to upload files programmatically in React File Upload

31 Aug 20265 minutes to read

Programmatic file upload enables you to trigger upload actions through code rather than user interactions. Use the upload method to initiate file uploads. Retrieve selected file data from the getFilesData public method.

The upload method accepts the following signatures:

  • upload() - Uploads all files currently in the file list.

  • upload(files) - Uploads only the files passed as the argument. Each entry in files must be a file object (typically obtained from getFilesData()).

  • If the upload method receives specific files as arguments, only those files will be uploaded.
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
    uploadObj;
    path = {
        removeUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Remove',
        saveUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Save'
    };
    uploadFirst() {
        if (!isNullOrUndefined(this.uploadObj.getFilesData()[0])) {
            this.uploadObj.upload(this.uploadObj.getFilesData()[0]);
        }
    }
    uploadAll() {
        this.uploadObj.upload(this.uploadObj.getFilesData());
    }
    render() {
        return (<div id='container'>
        <div className="control_wrapper">
            <UploaderComponent autoUpload={false} ref={upload => { this.uploadObj = upload; }} asyncSettings={this.path}/>
        </div>
        <span className="upload-buttons">
            <button id='first' className='e-btn e-control' onClick={this.uploadFirst = this.uploadFirst.bind(this)}>Upload first file</button>
        </span>
        <span className="upload-buttons">
            <button id='full' className='e-btn e-control' onClick={this.uploadAll = this.uploadAll.bind(this)}>Upload all files</button>
        </span>
    </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('fileupload'));
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { UploaderComponent } 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://services.syncfusion.com/react/production/api/FileUploader/Remove',
      saveUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Save'
  }
  public uploadFirst(): void {
    if(!isNullOrUndefined(this.uploadObj.getFilesData()[0])) {
        this.uploadObj.upload(this.uploadObj.getFilesData()[0]);
    }
  }
  public uploadAll(): void {
    this.uploadObj.upload(this.uploadObj.getFilesData());
  }
  public render(): JSX.Element {
    return (
      <div id='container'>
        <div className="control_wrapper">
            <UploaderComponent autoUpload={false} ref = {upload => {this.uploadObj = upload !}} asyncSettings={this.path} />
        </div>
        <span className="upload-buttons">
            <button id='first' className='e-btn e-control' onClick={this.uploadFirst = this.uploadFirst.bind(this)}>Upload first file</button>
        </span>
        <span className="upload-buttons">
            <button id='full' className='e-btn e-control' onClick={this.uploadAll = this.uploadAll.bind(this)}>Upload all files</button>
        </span>
    </div>);
  }
}

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

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