Import an excel document using file uploader in EJ2 React Spreadsheet component

If you explore your machine to select and upload an excel document using the file uploader, you will receive the uploaded document as a raw file in the success event of the file uploader. In this success event, you should pass the received raw file as an argument to the Spreadsheet’s open method to see the appropriate output.

The following code example shows how to import an excel document using file uploader in spreadsheet.

app.jsx

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
function App() {
  const spreadsheetRef = React.useRef(null);
  const uploaderRef = React.useRef(null);
  const asyncSettings = {
    saveUrl:
      'https://services.syncfusion.com/react/production/api/FileUploader/Save',
    removeUrl:
      'https://services.syncfusion.com/react/production/api/FileUploader/Remove',
  };
  const allowedExtensions = '.xlsx, .xls, .csv';
  const onSuccess = (args) => {
    if (args.operation == 'upload')
      spreadsheetRef.current.open({ file: args.file.rawFile });
  };

  return (
    <div>
      <SpreadsheetComponent
        ref={spreadsheetRef}
        openUrl="https://services.syncfusion.com/react/production/api/spreadsheet/open"
      />
      <UploaderComponent
        ref={uploaderRef}
        asyncSettings={asyncSettings}
        success={onSuccess}
        allowedExtensions={allowedExtensions}
      ></UploaderComponent>
    </div>
  );
}
export default App;

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

app.tsx

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
function App() {
  const spreadsheetRef = React.useRef<SpreadsheetComponent>(null);
  const uploaderRef = React.useRef<UploaderComponent>(null);
  const asyncSettings = {
    saveUrl:
      'https://services.syncfusion.com/react/production/api/FileUploader/Save',
    removeUrl:
      'https://services.syncfusion.com/react/production/api/FileUploader/Remove',
  };
  const allowedExtensions: string = '.xlsx, .xls, .csv';
  const onSuccess = (args) => {
    if (args.operation == 'upload')
      spreadsheetRef.current.open({ file: args.file.rawFile });
  };
  return (
    <div>
      <SpreadsheetComponent
        ref={spreadsheetRef}
        openUrl="https://services.syncfusion.com/react/production/api/spreadsheet/open"
      />
      <UploaderComponent
        ref={uploaderRef}
        asyncSettings={asyncSettings}
        success={onSuccess}
        allowedExtensions={allowedExtensions}
      ></UploaderComponent>
    </div>
  );
}
export default App;

const root = createRoot(document.getElementById('root')!);
root.render(<App />);