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