Селектор файлов не отображается при нажатии ввода файла

Question

компонент html: <input type="file" name="notImportant" (change)="handleFileInput($event)">

компонент ts: handleFileInput = e => {console.log(e);}

это очень просто html, когда я нажимаю на кнопку выбора файла; ничего не происходит, ошибок тоже нет. не уверен, что какой-либо пакет блокирует действие по умолчанию. это работало до того, как я начал интеграцию API. добавление до и после содержимого package.json.

До:

"dependencies": {
    "@angular/animations": "~8.2.14",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "^8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "@coreui/coreui": "^2.1.16",
    "@ng-select/ng-select": "^3.7.1",
    "@ngx-translate/core": "^11.0.1",
    "bootstrap": "^4.4.1",
    "font-awesome": "^4.7.0",
    "jquery": "^3.4.1",
    "ngx-pagination": "^5.0.0",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },

После:

"dependencies": {
    "@angular/animations": "~8.2.14",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "^8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "@coreui/coreui": "^2.1.16",
    "@ng-select/ng-select": "^3.7.1",
    "@ngx-translate/core": "^11.0.1",
    "@types/axios": "^0.14.0",
    "angular-bluebird": "0.0.1",
    "axios": "^0.19.2",
    "bootstrap": "^4.4.1",
    "font-awesome": "^4.7.0",
    "jquery": "^3.4.1",
    "ngx-pagination": "^5.0.0",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },

ОБНОВЛЕНИЕ

если я поставлю <input type="file" name="notImportant" (change)="handleUpload($event)"> в app.component.html, это сработает.

Answer 1

**Check This**

 <button type="button" mat-button (click)="choosefile.click()">ChooseFile</button>      
 <input type="file" #choosefile name="requestfile" (change)="onFileChange($event)" accept="application/pdf, image/*">

 <span>{{filename}}</span>

  onFileChange(event){
  var file = event.target.files[0];
  this.filename= file.name;
  }