nvFileOver's class doesn't get removed when file is moved out from the element

[mr-moon]

Just as subj. I'm on OS X 10.9 Chrome 37.0.2062.94,

[mr-moon]

Just a little screen capture: http://cl.ly/3G1T3l211O1l

[drsouly]

same here ..

[EccoTheDolphin]

Same here for chromium 39.0.2138.3 and Mozilla Firefox 24.7.0

Steps to reproduce:

javascript:

angular
    .module('app', ['angularFileUpload'])
        .controller('AppController', function($scope, FileUploader) {
                  $scope.uploader = new FileUploader();
                      });

css:

.nv-file-over { border: none !important; }

.buggy-drop-zone {
    width : 400px;
    height : 400px;
    border : 0;
}

.buggy-drop-zone * {
    border-color : black;
    border : solid;
    width  : 100%;
    height : 100%;
}

.buggy-drop-zone.nv-file-over * {
    background : red;
}

html (interesting part):

<div ng-app="app">
        <div ng-controller="AppController"
            class="buggy-drop-zone"
            nv-file-over
            nv-file-drop=""
            uploader="uploader"
            >
            <div>
            </div>
        </div>
    </div>

When we drag file into the buggy-drop-zone area - background of the inner div switches to red. But when we move it out - it stays the same (instead of switching back to default).

For workaround you can use something like that:

.buggy-drop-zone * {  pointer-events : none; }

[EccoTheDolphin]

I think that current behavior is incorrect. For example:

.drop-zone {
    height : 200px;
    width : 300px;
    border : solid 1px black;
}
.nasty-item {
    text-align: center;
    background : lightgray;
    position : relative;
    top : 45%;
}

<div ng-controller="AppController" class="drop-zone"  nv-file-over  nv-file-drop="" uploader="uploader">
    <div class="nasty-item"><span>
        Drag file along this element
        <br>
        (accelerate near the left/right boder)
      </span></div>
</div>

then, if user moves file out of drop-zone along the <div><span></span></div>, and if he does it quite fast (or root element has no border) - in that case onDragLeave will not be triggered.

[nervgh]

fixed #237

[shinrox]

This issue is still happening, go to example pages then drag a file over/out the window.

Tested on Mac OSX 10.10.5
Chrome 44.0.2403.157
Firefox 40.0.3

[chaim-alter]

I have the same issue, and this is my workaround.

element.on('dragleave', function () {
    $(this).removeClass('file-over-now-class');
});

[kuafucode]

+1 even exists in example link

[celsomtrindade]

+1 same here. On my page and on example link. tested on chrome and firefox. Both with same issue.

The class only get removed if the file is added to queue. But if i hover the file on the drop zone and leave without adding the file, the class will stay applied.

[pyrostrex]

Just to add to @chaim-kedem's workaround, if you have child inside the element, you should add pointer-events: none; to the css of your child element to prevent flickers. Credits to http://stackoverflow.com/a/14027995

[v-zabavsky]

A simple decorator to the nvFileOver directive:

(function () {
    'use strict';
    appModule.config(function ($provide) {
        $provide.decorator('nvFileOverDirective', function ($delegate) {
            var directive = $delegate[0],
                link = directive.link;

            directive.compile = function () {
                return function (scope, element, attrs) {
                    var overClass = attrs.overClass || 'nv-file-over';
                    link.apply(this, arguments);
                    element.on('dragleave', function () {
                        element.removeClass(overClass);
                    });
                };
            };

            return $delegate;
        });
    });
})();

Thanks @chaim-kedem for the workaround and @thijsw for the hint.
I hope that helps.

[thijsw]

In addition to the fix proposed by @chaim-kedem: the fix shouldn't depend on jQuery because you could just use element its removeClass() method

element.on('dragleave', function () {
    element.removeClass('file-over-now-class');
});

[luncht1me]

Nothing here has really worked flawlessly for me yet..... Can we get a patch that handles drag leave ??

[liadlivnat]

Hello ?? can anyone commit a fix for that ?

[gimoteco]

The problem still happening in version 2.2.0, you can check in the sample pages. When you get out from drop zone the over-class remains.

[nestdimon]

+1

[miliare]

+1

[rknell]

+1

[blackmiaool]

$(document.body).mouseenter(function(){
    $(this).removeClass("[nvFileOver's class]");
})

This makes the target page not that bad at least.

[PeterClough]

Seems to be this line on line no. 1706 of angular-file-upload.js I wonder why it's there...

if (event.currentTarget === this.element[0]) return;

[jameseddyedwards]

This line appears to be added for a flickering issue for Chrome which I'd imagine could have been solved with CSS alone. I think it needs to take into account whether the nv-file-over directive is applied to the same element as the nv-file-drop so actually changing this to a !== seems to make more sense and is the fix I've applied.

[mohitsudhakar]

Does this issue still exist?

[MGZero]

Still not working in 2.5.0