Trigger click event of input file from external button in React Uploader component

21 Feb 20264 minutes to read

Trigger the file input dialog from an external button by invoking the click event on the Uploader’s internal input element. This approach enables custom browse buttons outside the Uploader component. The following sample demonstrates triggering the file selection dialog from an Essential^® JavaScript 2 Button.

index.jsx

import { select } 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'
    };
    browseClick() {
        const wrapperEle = select('.e-file-select-wrap button', document);
        wrapperEle.click();
    }
    render() {
        return (<div className="control_wrapper">
            <div id="dropArea">
                <span id="drop"> Drop image (JPG, PNG) files here or <button className='e-btn e-control' id="browse" onClick={this.browseClick = this.browseClick.bind(this)}>Browse</button></span>
            </div>
            <UploaderComponent ref={uplaod => { this.uploadObj = uplaod; }} asyncSettings={this.path}/>
        </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('fileupload'));

index.tsx

import { select } 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 browseClick(): void {
    const wrapperEle: HTMLElement = select('.e-file-select-wrap button', document) as HTMLElement;
    wrapperEle.click();
  }
  public render(): JSX.Element {
    return (
        <div className="control_wrapper">
            <div id="dropArea">
                <span id="drop"> Drop image (JPG, PNG) files here or <button className='e-btn e-control' id="browse" onClick = {this.browseClick = this.browseClick.bind(this)}>Browse</button></span>
            </div>
            <UploaderComponent ref={uplaod => {this.uploadObj = uplaod !}} asyncSettings={this.path} />
        </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.