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

Question

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.

Arg0n · Accepted Answer · 2020-06-04 07:17:11Z

2

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.

answered Jun 4, 2020 at 7:17

Arg0n

8,4532 gold badges26 silver badges39 bronze badges

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

1 Comment

Surya Over a year ago

It worked by adding (click)="$event.preventDefault()" . Thank you very much for the answer.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related