4👍
dragging a file over any child node of dropzone (over label, for example) is counted as a dragleave event so even if hold a file over the dropzone it’s not green anymore.
to avoid this you can set pointer-events: none; on the children you don’t want "stealing" the drag. keep in mind that this will also disable all pointer events on those components including clicks.
Another solution would be to have an invisible dropzone element that appears over top of the drop area whenever you get a dragover event on the body. (Absolute positioning, high z-index).
something along the lines of: https://stackoverflow.com/a/61417954/5861427
But that doesn’t really get rid of dragover. That being said, I don’t think using dragover is bad. I’ve seen many people use both dragenter and dragover at the same time to signify a start and dragleave as well as drop to signify the end of a drag (successful or not). I’ve been using this combo myself for quite some time and found it to be reliable.
As for the value of the input element, setting it gives assistive technologies a clear indication that a file has indeed been selected.