Search results

Achieve File Upload Programmatically in React Uploader component

You can upload a file programmatically using the upload method. Get the selected files data from the getFilesData public method in uploader.

  • If this method receives any files as arguments, those files only start to upload.
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: '',
      saveUrl: ''
  public uploadFirst(): void {
    if(!isNullOrUndefined(this.uploadObj.getFilesData()[0])) {
  public uploadAll(): void {
  public render(): JSX.Element {
    return (
      <div id='container'>
        <div className="control_wrapper">
            <UploaderComponent autoUpload={false} ref = {upload => {this.uploadObj = upload !}} asyncSettings={this.path} />
        <span className="upload-buttons">
            <button id='first' className='e-btn e-control' onClick={this.uploadFirst = this.uploadFirst.bind(this)}>Upload first file</button>
        <span className="upload-buttons">
            <button id='full' className='e-btn e-control' onClick={this.uploadAll = this.uploadAll.bind(this)}>Upload all files</button>

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