HTML Input type file to support only drag and drop but restrict file browse and upload

user_8169680 0
Viewed 372

I have input type "file".

<input type="file" class="someCssClass"
        (drop)="onImageDrop($event)" required>

I want to restrict user so that they can't click on the file box to select a file to upload. Only drag and drop should be permitted on the file input box.

But how can I restrict the user? Please help as user is able to click on the file input box and browse folder option is coming on click which I don't want. Drag and Drop is working as expected and I am fine with that.

angular css html javascript
1 Answers

Maybe something like this would work ((click)="$event.preventDefault()"):

<input type="file" class="someCssClass" (drop)="onImageDrop($event)" 
   (click)="$event.preventDefault()" required>

If you want to make it a bit better for the user, make a function that shows an error/explanation at the same time it is cancelling the event.

user_40740450
Related