Angular 8 Button type="file" does not open dialog for file selection

Question

Recently a new bug came up which disabled the output window of the file select dialog.

<!-- shown in Maximilian Schwarzmuller Angular & NodeJS - The MEAN Stack Guide -->
<form [formGroup]="form" style="width: 100%">

   <div class="row" [ngStyle]="{'height': editing[0] ? 'fit-content' : '200%'}">
      <div class="col-12 d-flex justify-content-center" *ngIf="editing[0]">
         <button mat-button [color]="'edit-color'" type="button" (click)="image.click()">Add Image</button>
      </div>
      <input type="file" (change)="onImagePicked($event)" (click)="clicked()" #image>
   </div>

   ...form of image display...

</form>

whenever i call a click event in the mat-button it always gets called, same as in type="file", but the dialog in which i should select a file is never opened.

I assume the problem stems from this page being inside a mat-dialog, which is probably somehow conflicting with the browsers internal dialogs.

for now error has been seen in chrome and safari in development and production.

I am searching for a way to open a file dialog(browser) in my current page architecture.

Yoshy · Accepted Answer · 2019-12-06 18:23:26Z

1

Strange enough the issue wasn't the dialog. It was a click event called in html a bit higher up.

<h2 matRipple (click)="hamburgerClicked = !hamburgerClicked">
   <i class="fas fa-bars" mat-icon-button aria-label="Close dialog"></i>
</h2>

i just changed it to a function

<h2 matRipple (click)="clicked()">
   <i class="fas fa-bars" mat-icon-button aria-label="Close dialog"></i>
</h2>

and it works like a charm.

answered Dec 6, 2019 at 18:23

Yoshy

1822 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 8 Button type="file" does not open dialog for file selection

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related