Click here to Skip to main content
15,940,246 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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!")
    }        
Posted
Updated 9-Aug-19 2:21am
v6

1 solution

Neither HTML5 nor TypeScript have native abilities to work with Excel files; there would need to be a third-party component added in to do this,

It does look like this has been done though; the 2 lines containing XLSX.utils. follow the naming patterns of SheetJS. The best place to learn how to work with it would be the documentation for it.

Reference: GitHub - SheetJS/js-xlsx: SheetJS Community Edition -- Spreadsheet Toolkit[^]
 
Share this answer
 
Comments
Newbie04 9-Aug-19 8:24am    
Hi ,

I get the error "Property 'sheet_to_row_object_array' does not exist on type 'XLSX$Utils'." and there is nothing available in the documentation regarding this.Do you have any idea about this?

Also, I have updated the code in Component.ts a little bit. Will this help me in getting the number of rows in each excel?
MadMyche 9-Aug-19 9:14am    
I have limited experience with this package; I prefer to do Excel the old fashioned way: upload to a server and use the Office.Interop package in .NET

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900