Current i am able to read the excel but not able to validate and if user select other file instead of excel file then need to get a popup that "Please select excel file only"

Component.html

<input type="file" accept=".xlsx" class="btn btn-success" (change)="onFileChange($event)">

<button type="file" class="btn dark btn-outline" 
  (click)="uploadfile()">Upload</button>

Component.ts

 data=[];
 onFileChange(evt: any) {
    debugger
    /* wire up file reader */
    const target: DataTransfer = <DataTransfer>(evt.target);
    if (target.files.length == 1 && evt.target.accept === ".xlsx" ){
    const reader: FileReader = new FileReader();
    reader.onload = (e: any) => {
      /* read workbook */
      const bstr: string = e.target.result;
      const wb: XLSX.WorkBook = XLSX.read(bstr, {type: 'binary'});
      console.log(wb);
      /* grab first sheet */
      const wsname: string = wb.SheetNames[0];
      const ws: XLSX.WorkSheet = wb.Sheets[wsname];
      /* save data */
      this.data = <any>(XLSX.utils.sheet_to_json(ws, {header: 1}));
    };
    reader.readAsBinaryString(target.files[0]);

   }
  }
------
uploadfile() {
    let keys = this.data.shift();
    let resArr = this.data.map((e) => {
        let obj = {};
        keys.forEach((key, i) => {
            obj[key] = e[i];
        });
        return obj;
    });
    console.log(resArr);
    const _data = {
        data: resArr
    }
    this.cinemaService.newoperater(_data).subscribe();
  }

onFileChange() this method will read the data & uploadfile() this method will convert array of array into object and send it to API

please help me with the validation of excel file

Current i am able to read the excel but not able to validate and if user select other file instead of excel file then need to get a popup that "Please select excel file only"

Component.html

<input type="file" accept=".xlsx" class="btn btn-success" (change)="onFileChange($event)">

<button type="file" class="btn dark btn-outline" 
  (click)="uploadfile()">Upload</button>

Component.ts

 data=[];
 onFileChange(evt: any) {
    debugger
    /* wire up file reader */
    const target: DataTransfer = <DataTransfer>(evt.target);
    if (target.files.length == 1 && evt.target.accept === ".xlsx" ){
    const reader: FileReader = new FileReader();
    reader.onload = (e: any) => {
      /* read workbook */
      const bstr: string = e.target.result;
      const wb: XLSX.WorkBook = XLSX.read(bstr, {type: 'binary'});
      console.log(wb);
      /* grab first sheet */
      const wsname: string = wb.SheetNames[0];
      const ws: XLSX.WorkSheet = wb.Sheets[wsname];
      /* save data */
      this.data = <any>(XLSX.utils.sheet_to_json(ws, {header: 1}));
    };
    reader.readAsBinaryString(target.files[0]);

   }
  }
------
uploadfile() {
    let keys = this.data.shift();
    let resArr = this.data.map((e) => {
        let obj = {};
        keys.forEach((key, i) => {
            obj[key] = e[i];
        });
        return obj;
    });
    console.log(resArr);
    const _data = {
        data: resArr
    }
    this.cinemaService.newoperater(_data).subscribe();
  }

onFileChange() this method will read the data & uploadfile() this method will convert array of array into object and send it to API

please help me with the validation of excel file

• javascript
• angular

• "not able to" is not an error message or problem statement. What precisely is happening (or not happening) in your code? – ADyson Commented Feb 20, 2018 at 10:39

2 Answers 2

you can set the HTML Element directly to accept only csv:

<input type="file" ID="fileSelect" accept=".xlsx, .xls, .csv"/>

HTML Input="file" Accept Attribute File Type (CSV)

EDIT:

Some Browsers (i.e. Safari 10) may have problems using <input type="file" accept=".csv" />. In this case use

<input type="file" accept="text/csv" />

greetings

List item

 var reader = new FileReader();

      reader.onload = (e) => {

         let csvData = reader.result;
         let csvRecordsArray = (<any>csvData).trim().split(/\r\n|\n/);
         let header = csvRecordsArray[0].split(",");
       
        // for (var j = 0; j <= header.length; j++) {
            //if (header[j] == "") {
               //this.helper.showAlertMessage("Missing Header in CSV file.", "error");
               //this.myvariable.nativeElement.value = '';
               let headerdata = header.length;
               console.log(headerdata)
               for (var i = 1; i <= csvRecordsArray.length; i++) {
                  var data = csvRecordsArray[i].split(",");
                  var dataCount = data.length;
                  if (headerdata !== dataCount) {

                     this.helper.showAlertMessage("Missing column or Invalid  in CSV file.", "error");
                     this.myvariable.nativeElement.value = '';
                     

                  }

               }
            //}
        // }
         
      }
      reader.readAsText(event.target.files[0]);

      const resp = await this.fileObjectService.uploadFile(this.fileObject.databaseId, file, this.fileObject.tableName, 10);

`