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

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

About this issue

  • Original URL
  • State: closed
  • Created 10 years ago
  • Comments: 23 (3 by maintainers)

Commits related to this issue

Most upvoted comments

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.

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;

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; }

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

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