Angular 6 input file prevent file dialog opening

Question

I've a simple input of type file and I need to check a boolean variable before opening the file dialog to choose a file. Is there a way to do this? This is my code:

<input type="file" id="uploadFile" [disabled]="disableUpload" (change)="onUpload($event)" />

Clicking on input, a file dialog is shown. I need to do a check that, if positive, block the file dialog opening. Thanks to everybody!

Answer 1

You might try adding attr.disabled instead of disabled

<input [attr.disabled]="disableUpload ? '' : null"/>

Or if you are using reactive forms (I suggest you to do so), you may disable it using the form control.

UPDATE

You can assign a method to click event on file input and then check for the boolean value to perform desired operation.

In the component:

fileDialogShouldOpen = false;

fileInputClick = (event) => {

    // Open file dialog
    if(this.fileDialogShouldOpen){
      return true;
    }
    // Do not open file dialog
    else{

      event.preventDefault();
      event.stopPropagation();
      return false;
    }
}

And in the template:

<input type="file" (click)="fileInputClick($event)">

You can find a working example in this stackblitz project