Getting Started with React Uploader component

4 Sep 202422 minutes to read

This section explains how to create and configure the simple uploader component with its basic usage in step by step procedure.

To get start quickly with React Uploader component, you can check on this video:

Dependencies

The following are the dependencies required to use the uploader component in your application:

|-- @syncfusion/ej2-react-inputs
    |-- @syncfusion/ej2-react-base
    |-- @syncfusion/ej2-inputs
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-buttons

Installation and Configuration

You can use Create-react-app to setup the applications. To install create-react-app run the following command.

```bash
 npm install -g create-react-app
```

Start a new project using create-react-app command as follows

```
 create-react-app quickstart --scripts-version=react-scripts-ts
 cd quickstart    ```

Adding Syncfusion Packages

All the available Essential JS 2 packages are published in npmjs.com public registry.

To install uploader component, use the following command

npm install @syncfusion/ej2-react-inputs --save

Adding CSS Reference

Import the uploader component’s required CSS references as follows in src/App.css.

@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-react-inputs/styles/material.css";

The Custom Resource Generator (CRG) is an online web tool, which can be used to generate the custom script and styles for a set of specific components.
This web tool is useful to combine the required component scripts and styles in a single file.

Adding uploader to the application

Now, you can start adding uploader component to the application. We have added uploader component in src/App.tsx
file using following code.

[Class-component]

// import uploader component
import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import './App.css';

export default class App extends React.Component<{}, {}> {
    public render() {
        return <UploaderComponent id="uploader" />;
    }
}

[Functional-component]

import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import './App.css';

function App() {
        return <UploaderComponent id="uploader" />;
}
ReactDOM.render(<App />, document.getElementById('fileupload'));

From v16.2.41 version, the Essential JS2 AJAX library has been integrated for uploader server requests. Hence, use the third party promise library like blue-bird to use the uploader in Internet Explorer.

Run the application

After completing the configuration to render the basic uploader, run the following command to display the output in your default browser.

    npm run start

From v16.2.41 version, the Essential JS2 AJAX library has been integrated for uploader server requests. Hence, use the third party promise library like blue-bird to use the uploader in Internet Explorer.

The following code example illustrates the output in your browser.

[Class-component]

index.jsx

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 {
    render() {
        return (<UploaderComponent />);
    }
}
ReactDOM.render(<App />, document.getElementById('fileupload'));

index.tsx

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 render(){
    return (
      <UploaderComponent />
    );
  }
}
ReactDOM.render(<App />, document.getElementById('fileupload'));

[Functional-component]

index.jsx

import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
    return (<UploaderComponent />);
}
ReactDOM.render(<App />, document.getElementById('fileupload'));

index.tsx

import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App(){
    return (
      <UploaderComponent />
    );
}
ReactDOM.render(<App />, document.getElementById('fileupload'));

Adding drop area

By default, the uploader component allows to upload files by drag the files from file explorer and drop into the drop area. You can configure any other external element as drop target using dropArea property.

In the following sample, drop target is configured.

[Class-component]

index.jsx

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'
    };
    dropAreaRef;
    onCreated() {
        this.uploadObj.dropArea = this.dropAreaRef;
        this.uploadObj.dataBind();
    }
    render() {
        return (<div id='container'>
        <div id='droparea' ref={dropAreaEle => this.dropAreaRef = dropAreaEle}>
            Drop files here to upload
        </div>
        <div id='uploadfile'>
            <UploaderComponent autoUpload={false} ref={upload => this.uploadObj = upload} asyncSettings={this.path} created={this.onCreated = this.onCreated.bind(this)}/>
        </div>
      </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('fileupload'));

index.tsx

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'
  }
  private dropAreaRef: HTMLElement;

  public onCreated(): void {
    this.uploadObj.dropArea = this.dropAreaRef;
    this.uploadObj.dataBind();
  }
public render(): JSX.Element {
    return (
      <div id='container'>
        <div id='droparea' ref={dropAreaEle => this.dropAreaRef = dropAreaEle!}>
            Drop files here to upload
        </div>
        <div id='uploadfile' >
            <UploaderComponent autoUpload={false}  ref = { upload => this.uploadObj = upload !} asyncSettings={this.path} created={this.onCreated = this.onCreated.bind(this)} />
        </div>
      </div>
    );
    }
}
ReactDOM.render(<App />, document.getElementById('fileupload'));

[Functional-component]

index.jsx

import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
    let uploadObj;
    const path = {
        removeUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Remove',
        saveUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Save'
    };
    let dropAreaRef;
    function onCreated() {
        uploadObj.dropArea = dropAreaRef;
        uploadObj.dataBind();
    }
    return (<div id='container'>
        <div id='droparea' ref={dropAreaEle => dropAreaRef = dropAreaEle}>
            Drop files here to upload
        </div>
        <div id='uploadfile'>
            <UploaderComponent autoUpload={false} ref={upload => uploadObj = upload} asyncSettings={path} created={onCreated = onCreated.bind(this)}/>
        </div>
      </div>);
}
ReactDOM.render(<App />, document.getElementById('fileupload'));

index.tsx

import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
  let uploadObj: UploaderComponent;
  const path: object = {
    removeUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Remove',
    saveUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Save'
  }
  let dropAreaRef: HTMLElement;

  function onCreated(): void {
    uploadObj.dropArea = dropAreaRef;
    uploadObj.dataBind();
  }
    return (
      <div id='container'>
        <div id='droparea' ref={dropAreaEle => dropAreaRef = dropAreaEle!}>
            Drop files here to upload
        </div>
        <div id='uploadfile' >
            <UploaderComponent autoUpload={false}  ref = { upload => uploadObj = upload !} asyncSettings={path} created={onCreated = onCreated.bind(this)} />
        </div>
      </div>
    );
}

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

Configure asynchronous settings

The uploader component processes the files to upload in Asynchronous mode by default. Define the properties saveUrl and removeUrl to handle the save and remove action as follows.

[Class-component]

index.jsx

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 {
    path = {
        removeUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Remove',
        saveUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Save'
    };
    render() {
        return (<UploaderComponent autoUpload={false} asyncSettings={this.path}/>);
    }
}
ReactDOM.render(<App />, document.getElementById('fileupload'));

index.tsx

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 path: object = {
    removeUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Remove',
    saveUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Save'
}
  public render(): JSX.Element {
    return (
      <UploaderComponent autoUpload={false} asyncSettings={this.path} />
    );
  }
}
ReactDOM.render(<App />, document.getElementById('fileupload'));

[Functional-component]

index.jsx

import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
    const path = {
        removeUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Remove',
        saveUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Save'
    };
    return (<UploaderComponent autoUpload={false} asyncSettings={path}/>);
}
ReactDOM.render(<App />, document.getElementById('fileupload'));

index.tsx

import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
  const path: object = {
    removeUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Remove',
    saveUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Save'
}
    return (
      <UploaderComponent autoUpload={false} asyncSettings={path} />
    );
}

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

Handle success and failed upload

You can handle the success and failure actions using the success and failure events. To handle these event, define the function and assign it to corresponding event as shown below.

[Class-component]

index.jsx

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 {
    path = {
        removeUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Remove',
        saveUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Save'
    };
    onUploadSuccess(args) {
        if (args.operation === 'upload') {
            // window.console.log('File uploaded successfully');
        }
    }
    onUploadFailure(args) {
        // window.console.log('File failed to upload');
    }
    render() {
        return (<UploaderComponent autoUpload={false} asyncSettings={this.path} success={this.onUploadSuccess = this.onUploadSuccess.bind(this)} failure={this.onUploadFailure = this.onUploadFailure.bind(this)}/>);
    }
}
ReactDOM.render(<App />, document.getElementById('fileupload'));

index.tsx

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 path: object = {
    removeUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Remove',
    saveUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Save'
  }
  public onUploadSuccess(args: any): void  {
    if (args.operation === 'upload') {
      // window.console.log('File uploaded successfully');
    }
  }
  public onUploadFailure(args: any): void  {
    // window.console.log('File failed to upload');
  }
  public render(): JSX.Element {
    return (
      <UploaderComponent autoUpload={false} asyncSettings={this.path}
      success={this.onUploadSuccess=this.onUploadSuccess.bind(this)} failure={this.onUploadFailure=this.onUploadFailure.bind(this)}/>
    );
  }
}

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

[Functional-component]

index.jsx

import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
    const path = {
        removeUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Remove',
        saveUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Save'
    };
    function onUploadSuccess(args) {
        if (args.operation === 'upload') {
            // window.console.log('File uploaded successfully');
        }
    }
    function onUploadFailure(args) {
        // window.console.log('File failed to upload');
    }
    return (<UploaderComponent autoUpload={false} asyncSettings={path} success={onUploadSuccess = onUploadSuccess.bind(this)} failure={onUploadFailure = onUploadFailure.bind(this)}/>);
}
ReactDOM.render(<App />, document.getElementById('fileupload'));

index.tsx

import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
  const path: object = {
    removeUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Remove',
    saveUrl: 'https://services.syncfusion.com/react/production/api/FileUploader/Save'
  }
  function onUploadSuccess(args: any): void  {
    if (args.operation === 'upload') {
      // window.console.log('File uploaded successfully');
    }
  }
  function onUploadFailure(args: any): void  {
    // window.console.log('File failed to upload');
  }
    return (
      <UploaderComponent autoUpload={false} asyncSettings={path}
      success={onUploadSuccess=onUploadSuccess.bind(this)} failure={onUploadFailure=onUploadFailure.bind(this)}/>
    );
}

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

See Also

• How to add additional data on upload
• Achieve file upload programmatically
• Achieve invisible upload

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