I want to be able to drag a file onto any HTML Element and have it behave as if it was dragged onto a file input.

I can sort of do it with something like this:

<label>
    <input type="file">
</label>

… and use CSS to increase the label and hide the file input:

label {
    display: block;
    width: 200px;
    height: 100px;
}
input[type="file"] {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    opacity: 0;
}

but that isn’t very flexible.

I have tried using using a different element, which I would prefer, and JavaScript’s drop event and the eventTransfer object. I can get the file data, but can’t add it to the file input.

Other solutions tend to us Ajax and send the file directly or to some sort of holding area, but I would like to know whether it is possible to do simply with the file input.