// Some code
```typescript
uploadListener($event: any): void {
let text = [];
let files = $event.srcElement.files;
if (this.isValidCSVFile(files[0])) {
this.isLoading = true;
let input = $event.target;
let reader = new FileReader();
reader.readAsText(input.files[0]);
reader.onload = () => {
let csvData = (<string>reader.result).trim();
this.csvRecordsArray = csvData.split(/\r\n|\n/);
let headerRow = this.getHeaderArray(this.csvRecordsArray);
let recordColumn = 0;
let options = {
complete: (results: any, file: any) => {
// console.log('Parsed: ', results, file);
let csvArray = [];
for (let key in results.data) {
let csvRecord: any = [];
let row = results.data[key];
recordColumn = (Object.keys(row)).length;
if (recordColumn == headerRow.length) {
csvRecord.Id = Number(row.id);
csvRecord.Name = row.name;
csvRecord.Description = row.description;
csvArray.push(csvRecord);
}
}
// console.log(csvArray); // array
this.records = csvArray;
},
header: true
};
let jsonData = this.papa.parse(csvData, options);
this.isLoading = false;
if (this.headerTitle.length > 0 && recordColumn == this.headerTitle.length)
this.submitClicked = true;
};
reader.onerror = function () {
console.log('error is occured while reading file!');
};
} else {
alert("Please import valid .csv file.");
this.fileReset();
}
}
isValidCSVFile(file: any) {
return file.name.endsWith(".csv");
}
getHeaderArray(csvRecordsArr: any) {
let headers = (<string>csvRecordsArr[0]).split(',');
let headerArray: any = [];
for (let j = 0; j < headers.length; j++) {
headerArray.push(headers[j]);
if (headers[j] != '')
this.headerTitle.push(headers[j]);
}
return headerArray;
}
fileReset() {
this.csvReader.nativeElement.value = "";
this.records = [];
}
//add Batch Data
async onImportClick() {
this.isLoading = true;
this.wasteTypeService.addBatchWasteTypes(this.records)
.subscribe({
next: data => {
if (data.status == 200) {
let newRecords: any[] = [];
let failedList = data.body;
this.records.forEach(element => {
let csvRecord: any = [];
csvRecord.Id = Number(element.Id); //<<<<
csvRecord.Name = element.Name;
csvRecord.Description = element.Description;
if (failedList.indexOf(element.Name) < 0)
csvRecord.Result = true;
else
csvRecord.Result = false;
newRecords.push(csvRecord);
});
//order by id
// this.newRecords.sort((a, b) => (a.Id > b.Id) ? 1 : ((b.Id > a.Id) ? -1 : 0));
this.records = newRecords;
this.isLoading = false;
let failedLength = failedList.length;
if (failedLength == 0)
this.toastr.success('All new records (' + (this.records.length).toString() + ') have added successfully !', 'Success');
else if (this.records.length != failedLength)
this.toastr.info((this.records.length - failedLength).toString() + '/' + (failedLength).toString() + ' records have been successfully added !', 'Success');
else
this.toastr.warning('No records have been added !', 'Warning');
this.submitClicked = false;
this.reload(this.router.url);
}
},
error: error => {
console.error('There was an error in update !', error);
this.toastr.error('Add customer fail !', 'Error')
}
})
}
async reload(url: string): Promise<boolean> {
await this.router.navigateByUrl('weighing', { skipLocationChange: true });
return this.router.navigateByUrl(url);
}
```
