HelpBot Assistant

How can I help you?

Async in React Uploader component

21 Feb 202624 minutes to read

The uploader component allows you to upload the files asynchronously. The upload process requires save and remove action URL to manage the upload process in the server.

   * The save action is necessary to handle the upload operation.
   * The remove action is optional, one which handle the removed files from server.

The File can be upload automatically or manually. For more information, you can refer to the Auto Upload section from the documentation.

Multiple file upload

By default, the Uploader component enables simultaneous selection and upload of multiple files. Selected files display in a list that persists until cleared using the clear button in the footer. Enable the multiple file selection property to allow users to select multiple files at once.

The following example explains about multiple file upload settings.

[Class-component]

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 asyncSettings={this.path}/>);
    }
}
ReactDOM.render(<App />, document.getElementById('fileupload'));
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 asyncSettings={this.path} />
    );
  }
}

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

[Functional-component]

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

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

Single file upload

Upload one file at a time by disabling the multiple property. When this mode is active, the file list resets with each new selection, maintaining only the most recent file for upload.

The following example explains about single file upload settings.

[Class-component]

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 multiple={false} asyncSettings={this.path}/>);
    }
}
ReactDOM.render(<App />, document.getElementById('fileupload'));
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 multiple={false} asyncSettings={this.path} />
    );
  }
}

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

[Functional-component]

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 multiple={false} asyncSettings={path}/>);
}
ReactDOM.render(<App />, document.getElementById('fileupload'));
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 multiple={false} asyncSettings={path} />
    );
  }

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

Save action

Configure the saveUrl property to specify the server endpoint that handles file uploads. The save handler receives submitted files and manages the server-side save process. Upon successful upload, the file name displays in green and the remove icon changes to a delete icon.

*   When the file is uploaded successfully, the event “success” triggers to handle the
    operation after upload.
*   When the file is failed to upload, the event “failure” triggers with information,
    which cause this failure

You can cancel the upload process by setting the upload event argument eventargs.cancel to true.

[Class-component]

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

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

[Functional-component]

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

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

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

Server-side configuration for save action

This section explains how to handle the server-side action for saving the file in server.

public async Task<IActionResult> Save(IFormFile UploadFiles)
{
    if (UploadFiles.Length > 0)
    {
        if (!Directory.Exists(uploads)) // Create the directory if not exists
        {
            Directory.CreateDirectory(uploads);
        }

        var filePath = Path.Combine(uploads, UploadFiles.FileName); // Get the file path
        using (var fileStream = new FileStream(filePath, FileMode.Create)) // Create the file
        {
            await UploadFiles.CopyToAsync(fileStream); // Save the file
        }
    }
    return Ok();
}

Server-side configuration for saving and returning responses

The following example demonstrates the server-side action for saving files on the server and returning responses in JSON, String, and File formats.

[AcceptVerbs("Post")]
public IActionResult Save()
{
    // for JSON Data
    try
     {
        // Process uploaded data
        var responseData = new
        {
            Success = true,
            Message = "Files uploaded successfully",
            // Additional data can be added here
        };

        return Json(responseData);
     }
     catch (Exception e)
     {
         var errorResponse = new
         {
            Success = false,
            Message = "File upload failed: " + e.Message
         };

         return Json(errorResponse);
     }

    // for String Data
    try
    {
        // Process string data
        var data = "success";
        // Return the string data
        return Content(data);
    }
    catch (Exception)
    {
        var data = "failed";
        return Content(data);
    }

    // for File Data
    try
    {
        // Example: Retrieve file path for stream.txt
        var filePath = "stream.txt"; // Example file path
        
        // Get full file path
        var fullPath = Path.GetFullPath(filePath);

        // Return the file
        return PhysicalFile(fullPath, "text/plain");
    }
    catch (Exception e)
    {
        // Handle file retrieval failure
        return Content("Failed to retrieve file response: " + e.Message, "text/plain");
    }
}

Client-side configuration for saving and returning responses

The following example demonstrates the client-side action for saving files on the server and returning responses in JSON, String, and File formats.

[Class-component]

import { getUniqueID } 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 {
    path = {
        saveUrl: '/api/FileUploader/Save'
    };
    onSuccessHandler(args) {
        if (args.e !== null) // Check if the event argument is not null 
        {
            var responseText = args.e.target.responseText;
            if (responseText.trim() !== "") {

                // for JSON and File Datas
                var jsonResponse = JSON.parse(responseText);
                if (jsonResponse !== null && jsonResponse.hasOwnProperty("Success"))
                {
                    var isSuccess = jsonResponse["Success"];
                    if (isSuccess) {
                        // File upload success
                        var message = jsonResponse.hasOwnProperty("Message") ? jsonResponse["Message"] : "File uploaded successfully";
                        // Additional processing as needed
                    }
                }

                // for string Data
                var message = responseText;
                // Additional processing as needed
            }
        }
    }
    render() {
        return (<UploaderComponent asyncSettings={this.path} success={this.onSuccessHandler = this.onSuccessHandler.bind(this)}/>);
    }
}
ReactDOM.render(<App />, document.getElementById('fileupload'));
import { UploaderComponent, SuccessEventArgs } 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 = {
        saveUrl: '/api/FileUploader/Save'
    }
    public onSuccessHandler(args: SuccessEventArgs): void {
        if (args.e !== null) // Check if the event argument is not null
        { 
            const responseText: string = args.e.target.responseText;
            if (responseText.trim() !== "") {

                // for JSON and File Datas
                var jsonResponse = JSON.parse(responseText);
                if (jsonResponse !== null && jsonResponse.hasOwnProperty("Success"))
                {
                    var isSuccess = jsonResponse["Success"];
                    if (isSuccess) {
                        // File upload success
                        const message: string = jsonResponse.hasOwnProperty("Message") ? jsonResponse["Message"] : "File uploaded successfully";
                        // Additional processing as needed
                    }
                }

                // for string Data
                const message: string = responseText;
                // Additional processing as needed
            }
        }
    }
    public render(): JSX.Element{
        return (
            <UploaderComponent asyncSettings={this.path} success={this.onSuccessHandler = this.onSuccessHandler.bind(this)} />);
    }
}

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

[Functional-component]

import { getUniqueID } from '@syncfusion/ej2-base';
import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
    const path = {
        saveUrl: '/api/FileUploader/Save'
    };
    function onSuccessHandler(args) {
        if (args.e !== null) // Check if the event argument is not null 
        {
            var responseText = args.e.target.responseText;
            if (responseText.trim() !== "") {

                // for JSON and File Datas
                var jsonResponse = JSON.parse(responseText);
                if (jsonResponse !== null && jsonResponse.hasOwnProperty("Success"))
                {
                    var isSuccess = jsonResponse["Success"];
                    if (isSuccess) {
                        // File upload success
                        var message = jsonResponse.hasOwnProperty("Message") ? jsonResponse["Message"] : "File uploaded successfully";
                        // Additional processing as needed
                    }
                }

                // for string Data
                var message = responseText;
                // Additional processing as needed
            }
        }
    }
    return (<UploaderComponent asyncSettings={path} success={onSuccessHandler = onSuccessHandler.bind(this)}/>);
}
ReactDOM.render(<App />, document.getElementById('fileupload'));
import { UploaderComponent, SuccessEventArgs } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    const path: object = {
        saveUrl: '/api/FileUploader/Save'
    }
    function onSuccessHandler(args: SuccessEventArgs): void {
        if (args.e !== null) // Check if the event argument is not null
        { 
            const responseText: string = args.e.target.responseText;
            if (responseText.trim() !== "") {

                // for JSON and File Datas
                var jsonResponse = JSON.parse(responseText);
                if (jsonResponse !== null && jsonResponse.hasOwnProperty("Success"))
                {
                    var isSuccess = jsonResponse["Success"];
                    if (isSuccess) {
                        // File upload success
                        const message: string = jsonResponse.hasOwnProperty("Message") ? jsonResponse["Message"] : "File uploaded successfully";
                        // Additional processing as needed
                    }
                }

                // for string Data
                const message: string = responseText;
                // Additional processing as needed
            }
        }
    }
        return (
            <UploaderComponent asyncSettings={path} success={onSuccessHandler = onSuccessHandler.bind(this)} />);
}

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

Remove action

The remove action is optional. Specify the URL to handle remove process from server. The remove handler receives the posted files and handle the remove operation in server.

* When the files are removed successfully from server, the success event triggers to denote the process has completed.
* When remove action fails, the event “failure” triggers with information, which cause failure in remove process.

You can differentiate the file operation whether the success event triggers from save or remove action in its arguments eventArgs.operation .

You can remove the files which is not uploaded yet from locally by clicking the remove icon. In this case, the success or failure events will not be triggered.

[Class-component]

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 asyncSettings={this.path}/>);
    }
}
ReactDOM.render(<App />, document.getElementById('fileupload'));
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
      asyncSettings={this.path} />
    );
  }
}
ReactDOM.render(<App />, document.getElementById('fileupload'));

[Functional-component]

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

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

Server-side configuration for remove action

To remove an uploaded file from the server, it is sufficient to send only the file name. You can achieve this by setting the postRawFile property of the RemovingEventArgs to false during the removing event. This ensures that only the file name is sent to the server in the Remove action.

Here is an example:

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

const Default = () => {
  let asyncSettings;
  asyncSettings = {
    saveUrl:
      'https://services.syncfusion.com/react/production/api/FileUploader/Save',
    removeUrl:
      'https://services.syncfusion.com/react/production/api/FileUploader/Remove',
  };

  function onRemoveFile(args) {
    args.postRawFile = false;
  }

  return (
    <div className="control-pane">
      <UploaderComponent
        id="fileUpload"
        asyncSettings={asyncSettings}
        removing={onRemoveFile.bind(this)}
      ></UploaderComponent>
    </div>
  );
};
export default Default;

const root = createRoot(document.getElementById('sample'));
root.render(<Default />);

Here’s how to handle the server-side action for removing the file from server.

public void Remove(string UploadFiles)
{
    if (UploadFiles != null)
    {
        var filePath = Path.Combine(uploads, UploadFiles);
        if (System.IO.File.Exists(filePath))
        {
            System.IO.File.Delete(filePath); // Delete the file
        }
    }
}

When postRawFile is enabled, the complete file data will be sent to the server-side Remove action. The postRawFile option is enabled by default.

Here is an example:

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

const Default = () => {
  let asyncSettings;
  asyncSettings = {
    saveUrl:
      'https://services.syncfusion.com/react/production/api/FileUploader/Save',
    removeUrl:
      'https://services.syncfusion.com/react/production/api/FileUploader/Remove',
  };

  function onRemoveFile(args) {
    // The `postRawFile` option is enabled by default.
  }

  return (
    <div className="control-pane">
      <UploaderComponent
        id="fileUpload"
        asyncSettings={asyncSettings}
        removing={onRemoveFile.bind(this)}
      ></UploaderComponent>
    </div>
  );
};
export default Default;

const root = createRoot(document.getElementById('sample'));
root.render(<Default />);

Here’s how to receive the file data in the server-side Remove action:

public void Remove(IFormFile UploadFiles)
{
    // Your file removal logic goes here!
}

Auto upload

By default, the uploader processes the files to upload once the files are selected and added in upload queue.
To upload manually, disable the autoUpload property. When you disable this property, you can use the action buttons to call upload all or clear all actions manually.
You can change those buttons text using the buttons property in the uploader component.

[Class-component]

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 asyncSettings={this.path}/>);
    }
}
ReactDOM.render(<App />, document.getElementById('fileupload'));
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
      asyncSettings={this.path} />
    );
  }
}

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

[Functional-component]

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

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

Sequential upload

By default, the uploader component process multiple files to upload simultaneously. When you enable the sequentialUpload property, the selected files will process sequentially (one after the other) to the server. If the file uploaded successfully or failed, the next file will upload automatically in this sequential upload. This feature helps to reduce the upload traffic and reduce the failure of file upload.

[Class-component]

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 sequentialUpload={true} asyncSettings={this.path}/>);
    }
}
ReactDOM.render(<App />, document.getElementById('fileupload'));
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 sequentialUpload={true}
      asyncSettings={this.path} />
    );
  }
}

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

[Functional-component]

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 sequentialUpload={true} asyncSettings={path}/>);
}
ReactDOM.render(<App />, document.getElementById('fileupload'));
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 sequentialUpload={true}
      asyncSettings={path} />
    );
  }

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

Preloaded files

The uploader component allows you to preloaded the list of files that are uploaded in the server. The preloaded files are useful to view and remove the files from server that can be achieved by the files property. By default, the files are configured with uploaded successfully state on rendering file list.
The following properties are mandatory to configure the preloaded files:

*   Name
*   Size
*   Type

[Class-component]

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'
    };
    preloadFiles = [
        { name: 'Books', size: 500, type: '.png' },
        { name: 'Movies', size: 12000, type: '.pdf' },
        { name: 'Study materials', size: 500000, type: '.docx' },
    ];
    render() {
        return (<UploaderComponent files={this.preloadFiles} asyncSettings={this.path}/>);
    }
}
ReactDOM.render(<App />, document.getElementById('fileupload'));
import { FilesPropModel, 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 preloadFiles: FilesPropModel[] = [
    {name: 'Books', size: 500, type: '.png'},
    {name: 'Movies', size: 12000, type: '.pdf'},
    {name: 'Study materials', size: 500000, type: '.docx'},
  ];
  public render() {
    return (
      <UploaderComponent files={this.preloadFiles}
      asyncSettings={this.path} />
    );
  }
}

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

[Functional-component]

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'
    };
    const preloadFiles = [
        { name: 'Books', size: 500, type: '.png' },
        { name: 'Movies', size: 12000, type: '.pdf' },
        { name: 'Study materials', size: 500000, type: '.docx' },
    ];
    return (<UploaderComponent files={preloadFiles} asyncSettings={path}/>);
}
ReactDOM.render(<App />, document.getElementById('fileupload'));
import { FilesPropModel, 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'
  }
  const preloadFiles: FilesPropModel[] = [
    {name: 'Books', size: 500, type: '.png'},
    {name: 'Movies', size: 12000, type: '.pdf'},
    {name: 'Study materials', size: 500000, type: '.docx'},
  ];
    return (
      <UploaderComponent files={preloadFiles}
      asyncSettings={path} />
    );
}

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

Adding additional HTTP headers with upload action

The Uploader component allows you to add the additional headers with save and remove action requests using the uploading and removing events, which helps to send validation token on file upload. Access the current request and set the request header within these events.

The following code block shows how to add the additional headers with save and remove action request.

[Class-component]

import { UploaderComponent, UploadingEventArgs } 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 = {
        saveUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Save',
        removeUrl: 'https://services.syncfusion.com/js/production/api/FileUploader/Remove'
  }

  public addHeaders(args: UploadingEventArgs) {
    (args.currentRequest as XMLHttpRequest).setRequestHeader('custom-header', 'Syncfusion');
  }

  public render(): JSX.Element {
    return (
       <UploaderComponent  ref = {upload => this.uploadObj = upload !}
          asyncSettings={this.path} uploading={this.addHeaders=this.addHeaders.bind(this)} removing={this.addHeaders=this.addHeaders.bind(this)} />
    );
  }
}

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

[Functional-component]

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

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

    function addHeaders(args: UploadingEventArgs) {
      (args.currentRequest as XMLHttpRequest).setRequestHeader('custom-header', 'Syncfusion');
    }

    return (
      <UploaderComponent  ref = {upload => uploadObj != upload }
          asyncSettings={path} uploading={addHeaders=addHeaders.bind(this)} removing={addHeaders=addHeaders.bind(this)} />
    );
}

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.

See Also