Custom Forms: Allow Chrome/Firefox feature that lets the user drag and drop into file inputs

[wizpig64]

Chrome (among other browsers) allows you to drag and drop files from the desktop into <input type="file"> form elements. Bootstrap 4's custom file input covers up the base input, so drag and drop doesn't work.

This patch disables pointer-events on the custom element so dropped files pass through to the invisible, full-height input behind it. Normal clicks work just as they did.

[cvrebert]

pointer-events isn't supported in IE9-10 though, which are still supported browsers in v4.

[wizpig64]

True, but in that case wouldn't this effectively do nothing for IE users? This is, after all, not a standard feature of <input type="file"> but a Chrome feature that I wanted bootstrap to not get in the way of.

I just tested drag and drop on jsfiddle for both IE11 and Edge, and neither of them support the functionality that Chrome does, so I doubt IE 9 or 10 have it.

Just tried it on Firefox 46 with success, for what it's worth. The changed .custom-file does look strange on Firefox: Unlike chrome, it horizontally expands the input to accommodate added files, while the text box still shows an unchanged "Choose file...". Of course it behaved like that before the patch too, but the explorer dialogue hid the sudden resizing.

[cvrebert]

Huh, I wasn't aware that drag-file-into-file-input wasn't supported in IE/Edge, but you're right.
I withdraw my concern then.

[leetskills]

The shorthand is still used below, so why add these?

[wizpig64]

This padding is to make the hidden element match the height of the custom control. Without this extra height, files can only be dragged onto the top half of the control.

[mdo]

Wouldn't height make more sense to set?

[leetskills]

My point was more that these 2 lines seem redundant due to these: https://github.com/twbs/bootstrap/pull/20033/files/3e5c6dcc07dc25dbb0e11411bef68a17ad8e9c2a#diff-e5540857a54676b43146ad92add2dbdeR231

[wizpig64]

As I said before, it's to make the invisible input the same height as the visible .custom-file-control. Without it, dragging something onto the lower third of the button doesn't work. changing height does the same thing while looking cleaner though, so that's how it works now.

[mdo]

This is less a feature and more of a slight improvement and maybe a bug fix (since this is browser behavior for many folks). Should be able to merge, but I did have a question on the use of padding vs height on the hidden input.

[wizpig64]

Good call on height, I admit my css experience is limited.

One thing I noticed is that this change breaks cursor: pointer; as it seems to require pointer-events to work right. I tried moving that rule to the input element but (at least in chrome) the cursor still acts inconsistently: The cursor shows as a pointer everywhere except where the input's button should be. I'm not sure how to get around this, feedback welcome.

edit: Here's what I mean: https://gfycat.com/ShoddySleepyFlea - Note this shows what it would look like if the cursor style was applied to the input. As of the current commit the cursor is never a pointer.