Cannot set property 'effectAllowed' of undefined AGAIN

[OwenMelbz]

I noticed a previous post with a similar issue - however I couldnt resolve this my end.

I've got the following html setup

<section class="uk-grid"
    id="media"
    ng-controller="MediaCtrl"
    ng-include="'views/media.html'"
    ng-show="user.Data.loggedIn",
    file="image"
    file-dropzone="[image/png, image/jpeg, image/gif]"
    file-name="imageFileName"
    data-max-file-size="5"
></section>

then my js has

GMP.controller('MediaCtrl', function($scope, User){
    $scope.image = null;
    $scope.imageFileName = '';
});

GMP.directive('fileDropzone', function(){
    return {
        restrict: 'A',
        scope: {
            file: '=',
            fileName: '='
        },
        link: function($scope, element, attrs){
            var checkSize, isTypeValid, processDragOverOrEnter, validMimeTypes;

            processDragOverOrEnter = function (event) {
                if (event != null) {
                    event.preventDefault();
                }

                event.dataTransfer.effectAllowed = 'copy';

                return false;
            };

            validMimeTypes = attrs.fileDropzone;

            checkSize = function (size) {
                var _ref;
                if (((_ref = attrs.maxFileSize) === (void 0) || _ref === '') || (size / 1024) / 1024 < attrs.maxFileSize) {
                    return true;
                } else {
                    alert("File must be smaller than " + attrs.maxFileSize + " MB");
                    return false;
                }
            };

            isTypeValid = function (type) {
                if ((validMimeTypes === (void 0) || validMimeTypes === '') || validMimeTypes.indexOf(type) > -1) {
                    return true;
                } else {
                    alert("Invalid file type.  File must be one of following types " + validMimeTypes);
                    return false;
                }
            };

            element.bind('dragover', processDragOverOrEnter);
            element.bind('dragenter', processDragOverOrEnter);

            return element.bind('drop', function (event) {

                var file, name, reader, size, type;

                if (event != null) {
                    event.preventDefault();
                }

                reader = new FileReader();

                reader.onload = function (evt) {
                    if (checkSize(size) && isTypeValid(type)) {
                        return $scope.$apply(function () {
                            $scope.file = evt.target.result;
                            if (angular.isString($scope.fileName)) {
                                return $scope.fileName = name;
                            }
                        });
                    }
                };

                file = event.dataTransfer.files[0];
                name = file.name;
                type = file.type;
                size = file.size;
                reader.readAsDataURL(file);
                return false;
            });
        }
    }
});

However when i start dragging an item over the page i get the following console errors

Uncaught TypeError: Cannot set property 'effectAllowed' of undefined
processDragOverOrEnter
f.event.dispatch jquery.min.js:
h.handle.i jquery.min.js:

Uncaught TypeError: Cannot read property 'files' of undefined site.js:1(anonymous function) f.event.dispatch jquery.min.js:
h.handle.i

Please advise!

Thanks

[fisshy]

Does this occur in every browser ? I think I've seen a similar issue in Firefox.
Could you provide me with a plunkr/jsfiddle ?

But this might solve it.

processDragOverOrEnter = function (event) {
                if (event != null) {
                    event.preventDefault();
                }
                (event.originalEvent || event).dataTransfer.effectAllowed = 'move';
                return false;
            };

It should be something similar to this, because Firefox and Chrome handles the event in different ways.