Achieve file upload programmatically in React Uploader component

21 Feb 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, and retrieve selected file data from the getFilesData public method.

• If the upload method receives specific files as arguments, only those files will be uploaded.

index.jsx

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

index.tsx

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.