The UI contains the options of documents from which user will select an option. I want to bind the fileType
to the image that will be uploaded through the input tag. I am getting the value of the selected document from the drop down through ngValue
but not able to bind it with the image which is uploaded
app.component.html
<div class="document-upload row">
<div class="col-2">
<img id="uploaded-document" src="" alt="">
</div>
<div class="col-7">
<p class="text-white">Images should be in JPG, JPEG and PNG formats only.</p>
<select formControlName="document" id="upload-input" class="form-select text-white" aria-label="Default select example">
<option value="" selected>Select Documents</option>
<option [ngValue]='documents.fileType' *ngFor="let documents of documentsData">{{documents.fileName}}</option>
</select>
</div>
<div class="upload-btn col">
<input id="File" type="file" #docUpload>
<button type="button" class="btn bg-white" (click)="docUpload.click()">Upload</button>
</div>
</div>
app.component.ts
this.documentsData = [{
fileType : 1,
fileName : 'Aadhar Card'
},
{
fileType : 2,
fileName : 'Pan Card'
},
{
fileType : 3,
fileName : 'Education'
},
{
fileType : 4,
fileName : 'Employee Photo'
}]
Resolved it by myself using a Template Variable to access the value stored through ngValue
. Then passed the same value to a function using the template variable as reference.
app.component.html
<div class="document-upload row">
<div class="col-2">
<img id="uploaded-document" src="" alt="">
</div>
<div class="col-7">
<p class="text-white">Images should be in JPG, JPEG and PNG formats only.</p>
<select #fileType formControlName="document" id="upload-input" class="form-select text-white" aria-label="Default select example">
<option value="" selected>Select Documents</option>
<option [ngValue]='documents.fileType' *ngFor="let documents of documentsData">{{documents.fileName}}</option>
</select>
</div>
<div class="upload-btn col">
<input id="File" type="file" #docUpload>
<button type="button" class="btn bg-white" (click)="[docUpload.click(),documentUpload (fileType.value)]">Upload</button>
</div>
</div>