Search code examples
angulardropdownhtml-selectangular-file-upload

How to bind a value from select-options to the file that will be uploaded


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'      
    }]

Solution

  • 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>