I have the following html:

<div class="drop_window">
    <input class="drop_target" type="file" class="crop locale" size="800" />
    <div class="file_name">{{ video.original_file_name }}</div>
</div>

To have the drop_window change color on hover, I can do:

.drop_window:hover {
    background: #F5FFF5;
}

However, if I try and drag a file into that drop_window, it does not change color. How would I make it do so, similar to Gmail's file-drop functionality?

Here is an example of what I currently have: /

I have the following html:

<div class="drop_window">
    <input class="drop_target" type="file" class="crop locale" size="800" />
    <div class="file_name">{{ video.original_file_name }}</div>
</div>

To have the drop_window change color on hover, I can do:

.drop_window:hover {
    background: #F5FFF5;
}

However, if I try and drag a file into that drop_window, it does not change color. How would I make it do so, similar to Gmail's file-drop functionality?

Here is an example of what I currently have: http://jsfiddle/5MjGS/

• javascript
• jquery

• It would be better if you could show an example on jsfiddle – user1786283 Commented Jan 14, 2013 at 20:43
• @enginefree please see jsfiddle update – David542 Commented Jan 14, 2013 at 20:52

3 Answers 3

You can use just addEventListner on dragenter, And then you can adjust the style. Make sure to change the color back on dragexit so for example:

So if you want it just on the div try:

var drop = document.getElementById("layout");
drop.addEventListener("dragenter", change, false);
drop.addEventListener("dragleave",change_back,false);

function change() {
  drop.style.backgroundColor = '#EFF2AA';
};

function change_back() {
  drop.style.backgroundColor = 'transparent';
};

--Edit

jsfiddle: http://jsfiddle/zFbfE/1/

Just like @enginefree says you have to add some event to change the css styling of the upload container.

The only thing is that I should use the dragover event and not the dragenter event.

var drop = document.getElementById("layout");
drop.addEventListener("dragover", change, false);
drop.addEventListener("dragleave",change_back, false);
drop.addEventListener("drop", change_back, false);

function change() {
  drop.style.backgroundColor = '#EFF2AA';
};

function change_back() {
  drop.style.backgroundColor = 'transparent';
};

This is because the dragenter won't work if you hover over the input control or some other divs inside the upload container. The event dragover wil fire if you hover over any control. You only have to remove the styling again with the dragleave event.

There are quite a few drag and drop file upload plugins out there.

It looks like with a file, it's a hover/mouseover on the window, not necessarily on the element.

This tutorial http://www.inserthtml./2012/08/file-uploader/ is one I followed to impement the AJAX file upload into a site I made. Here is the demo: http://www.inserthtml./demo/file-upload/

It looks like to target the enter of a dragged file they use this jQuery event handler.

$('#drop-files').bind('dragenter', function() {
    $(this).css({'box-shadow' : 'inset 0px 0px 20px rgba(0, 0, 0, 0.1)', 'border' : '4px dashed #bb2b2b'});
    return false;
});

So the event handler you are looking for is dragenter.