How to drag a file into a <div> and send it to the file field?

Question

When you drag a file into the file field button (the one that says “Select file”), it automatically selects the file for this field. Is there anyway that I can drag the file in <div>and perform the same action so that the file is attached to the file field, as if I was dragging it directly to the file field?

Answer 1

By installing opacity: 0, as suggested by R. Shifini and position: absolute, I was able to create a div with an invisible file field on top of it. That way, when the user clicked on the div, they could select the file to use, or they could drag their file into the div and select the file that way.