用户点击编辑铅笔图标后，它将打开一个新的模式对话框

Question

用户单击“编辑铅笔”图标后，它将打开一个新的模态对话框供用户上传新照片， 但是目前，如果我单击编辑铅笔图标，将打开一个本地系统文件夹以上传新图片。[例如：在stackoverflow >> In Body中，如果要上传图像，我将单击图像图标，以便将会打开一个新的模式框，以上传照片...。与我需要的场景相同。.请在此先感谢我帮助...

onFileChange(event) {
    if (event.target.files && event.target.files[0])
      var reader = new FileReader();

    reader.readAsDataURL(event.target.files[0]);

    reader.onload = (event) => {
      this.imagePath = event.target['result'];
      this.isPhotoEditted = true;
      this.onSave();
    }
  }

<input #inputFile type="file" (change)="onFileChange($event)" style="visibility: hidden;" />

<div class="outer-div-for-the-imgae-icon">
                            <app-image [imagesrc]="imagePath" style="width : 38%; margin-top: 30px;"
                                class="d-none d-sm-block" alt="..."></app-image>
                            <i (click)="inputFile.click()" style="color : white;left:37%; 
                            position: absolute; top: 24px; padding: 3px; background-color:#0076C8; 
                            border-radius: 50%;font-size: 12px;"
                                class="fa fa-pencil fa-lg" aria-hidden="true"></i>
                        </div>