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

27 Apr 20242 minutes to read

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.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { DropDownButtonModule } from '@syncfusion/ej2-angular-splitbuttons'
import { SpreadsheetAllModule } from '@syncfusion/ej2-angular-spreadsheet'
import { UploaderModule } from '@syncfusion/ej2-angular-inputs'

import { Component, ViewChild } from '@angular/core';
import { SpreadsheetComponent } from '@syncfusion/ej2-angular-spreadsheet';

@Component({
imports: [
        
        DropDownButtonModule,
        UploaderModule,
        SpreadsheetAllModule
    ],


standalone: true,
  selector: 'app-container',
  template:
    "<div class='control-section'><ejs-spreadsheet #default [openUrl]='openUrl' [saveUrl]='saveUrl'></ejs-spreadsheet><ejs-uploader #defaultupload id='defaultfileupload' [asyncSettings]='path' (success)='onUploadSuccess($event)' [allowedExtensions]='allowExtensions'></ejs-uploader> </div>",
})
export class AppComponent {
  @ViewChild('default')
  public spreadsheetObj: SpreadsheetComponent;
  public openUrl: string =
    'https://services.syncfusion.com/angular/production/api/spreadsheet/open';
  public saveUrl: string =
    'https://services.syncfusion.com/angular/production/api/spreadsheet/save';
  public path: Object = {
    saveUrl: 'https://services.syncfusion.com/angular/production/api/FileUploader/Save',
    removeUrl: 'https://services.syncfusion.com/angular/production/api/FileUploader/Remove'
  };
  public allowedExtensions: string = '.xlsx, .xls, .csv';

  onUploadSuccess(args) {
    if (args.operation == 'upload')
      this.spreadsheetObj.open({ file: args.file.rawFile });
  }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));