How can I get the number of rows of an uploaded excel sheet.

See more:

HTML5

bootstrap

Typescript

, +

Hi,

I am uploading excel files using the input type file control. I need to read the file and do two things:

1.) Present the data of that excel file on the UI in a table.
2.) Get the number of rows in the excel.

If there is more than one excel, then get the number of rows for each excel separately.

What I have tried:

Component.html:

<div style="text-align: center">
      <div class="col-xs-9">
        <div class="form group">
          <label for="Upload" style="display: block;">Please select file to upload</label>
          <input type="file" multiple id="btnUpload" name="Upload" value="Upload" (change)="Onselect($event)"
            style="padding-left: 450px;" #btnUpload/>
        </div>
      </div>
    </div>

<div *ngIf="uploadMessage">
<p>{{number}}</p>
</div>

<div class="container" *ngIf="filesIsSelected" #mymodal>
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
             <h4 class="modal-title">Warning
            <button type="button"  class="btnUpload" data-dismiss="modal">
                <span class="glyphicon glyphicon-remove" ></span> 
              </button>
            </h4>
          </div>
          <div class="modal-body">
            <p>Do you want to upload selected files?</p>
  
            <div align="center">
                <button type="button" class="btn btn-danger" data-dismiss="modal">
                  <span class="glyphicon glyphicon-remove"></span> No
                </button>
                  
                <button type="button" class="btn btn-success" data-dismiss="modal" (click)="proceedUpload()">
                  <span class="glyphicon glyphicon-floppy-disk"></span> Yes
                </button>
      
            </div>          
          </div>       
        </div>      
      </div>
    </div>  

Component.ts:

Onselect(event: any){
    debugger;
      
    if (event.target.files && event.target.files.length > 0) { 

     this.filesIsSelected = true;

     const files = event.target.files;
      const numFiles = files.length;
      for (let i = 0; i < numFiles; ++i) {
        this.file = files[i];
      }
   }
else
   {
     this.filesIsSelected = false;
    }            
        
   proceedUpload(){
           
     (this.file != null) {
     
    //Read the Excel data
    var workbook = XLSX.read(this.file);

    //Fetch the name of First Sheet.
    var firstSheet = workbook.SheetNames[0];
 
    //Read all rows from First Sheet into an JSON array.
    var excelRows = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[firstSheet]);
    var number = excelRows.length();

      if( number > 0 )
      {
          this.uploadMessage = true;
      }
      else
      {
        this.uploadMessage = false;
      }
    

    let formData: FormData = new FormData();
    formData.append('Files', this.file);

    this.http.post("Url", formData).map(res => res.json())
      .catch(error => Observable.throw(error))
      .subscribe(
        data => console.log('success'),
        error => console.log(error)
      )

    }
    else
    {
        alert("Please upload a file!")
    }