Search results

Achieve File Upload Programmatically in React Uploader component

24 Sep 2021 / 2 minutes to read

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.
Source
Preview
index.tsx
Copied to clipboard
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://ej2.syncfusion.com/services/api/uploadbox/Remove',
  saveUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/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.