Search code examples
htmlcssinput-type-file

Only display element on hover and user is grabbing file

I've got the following setup:

  • a button which says: "upload your file here", which is just a plain <input type="file" multiple>

  • When the user goes into finder and wants to drop the file, I want to show a larger area where they can drop the file, since the button isn't very big. This should only be available when the user hovers over the 'bigger input' AND is holding a file.

How do I go about implementing #2?

I have seen a stylechange on this site: http://www.dropzonejs.com/ when the user 'hovers with a file' above the upload area, but haven't been able to figure out how they do it.

Solution

  • You can use Javascript for File Drop Style Change :

    check this Example :

    // file drag hover
function FileDragHover(e) {
    e.stopPropagation();
    e.preventDefault();
    e.target.className = (e.type == "dragover" ? "hover" : "");
}