<div class="card" >
<hr>
<div class="card-header">
<h2>Bank Statements of {{this.selectedOptionProduct}}</h2>
</div>
<div class="card-body">
<div class="loading-spinner" *ngIf="productSelectedForLoading && loading">
<div class="spinner"></div>
</div>
<table class="table" >
<thead>
<tr>
<th>Product Name</th>
<th>File Uploads</th>
<th>Status</th>
<th> File extenstion </th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of tableData " >
<td>{{ row.file_type_id }}</td>
<td>
<input type="file"  #fileInput [value]="row.file_type_id" (change)="onFileSelected($event, row)">
<button (click)="uploadFile(row)">Upload</button>
<button (click)="resetFileInput(fileInput)">Reset</button>
</td>
<td>{{ row.status }}</td>
<td>
<select (change)="onOptionSelectedExtention($event.target)" >
<option>Select one </option>
<option *ngFor="let extention of row.file_extensions" mat-menu-item [value]="extention" >{{extention}}</option>
</select>
</td>
</tr>
</tbody>
</table>

tableData: any[] = [ 
];
selectedExtention : String
loading: boolean = true;
onOptionSelectedExtention(selectedOption : any){
this.selectedExtention=selectedOption.value
console.log(this.selectedExtention)
}
async getTableData(selectedProduct: any) {
try {
const url = `API?product_id=${selectedProduct}`;
const response = await axios.get(url);
const data = response.data;
this.tableData = data;
this.loading = false;
console.log(this.tableData);
// Flatten the tableData array
this.flattenedTableData = this.tableData.reduce((accumulator, row) => {
return accumulator.concat(row.items);
}, []);
console.log(this.flattenedTableData);
// Use the variable as needed
console.log(data);
} catch (error) {
// Handle any errors
console.error('Error:', error);
}
}
resetFileInput(fileInput: HTMLInputElement) {
fileInput.value = ''; // Reset the value of the file input field
}
onFileSelected(event: any, row: any) {
row.selectedFile = event.target.files[0];
console.log(row.selectedFile['name'])
}
uploadFile(row: any) {
const file = row.selectedFile;
console.log(file);
if (file) {
const formData = new FormData();
formData.append('file', file);
// Make an HTTP request to upload the file
this.http.post('your-upload-api-url', formData)
.subscribe(
response => {
// Handle success response, e.g., update status
row.status = 'Uploaded';
},
error => {
// Handle error response, e.g., display an error message
console.log("hello")
}
);
}
}

         <td>
<input type="file"  #fileInput value="row.file_type_id" (change)="onFileSelected($event, row)">
<button (click)="uploadFile(row)">Upload</button>
<button (click)="resetFileInput(fileInput)">Reset</button>
</td>