CODEWITHSUNDEEP
javascriptjqueryfirefox
Matias Rozenblum
Matias Rozenblum

Reputation: 3

"e" is undefined only in Firefox

i have this function for a file drag & drop, and it only breaks in Firefox telling me "e.originalEvent.dataTransfer.types.contains is not a function". After some debugging I found out that "e" is undefined and I don't know why, any ideas?

if(mozilla){
    $('body').on('dragover', function (e) {
        <?php // hack because if not breaks browser ?>
        if($('#customIframe').length > 0){
            return;
        }
        e.originalEvent.stopPropagation();
        e.originalEvent.preventDefault();
        if ((!$('#smartUploadOverlay').is (':visible') ||
                ($('#smartUploadPopup').is (':visible')
                        && !$('#smartUploadDrag').is (':visible'))) &&
                e.originalEvent.dataTransfer.types.length < 5 &&
                e.originalEvent.dataTransfer.types.contains("Files")){
            smartUploader.toggle();
        }
    });
    $('body').on('dragleave', function (e) {
        <?php // hack because if not breaks browser ?>
        if($('#customIframe').length > 0){
            return;
        }
        e.originalEvent.stopPropagation();
        e.originalEvent.preventDefault();
        if ($('#smartUploadOverlay').is (':visible') &&
                e.originalEvent.dataTransfer.types.length < 5 &&
                e.originalEvent.dataTransfer.types.contains("Files")){
            smartUploader.toggle();
        }
    });

    $('#smartUploadOverlay').hover(
            function () {
                $('#smartUploadDrag').removeClass('hover');
            },
            function () {
                $('#smartUploadDrag').addClass('hover');
            });
} else {
    $('body').on('dragenter', function (e) {
        <?php // hack because if not breaks browser ?>
        if($('#customIframe').length > 0){
            return;
        }
        if (ie && !ie10 && $('.alertErrorMessageContainer').length == 0){
            showAlertMessage('<?php echo langEcho("drag:n:drop:not:supported")?>');
            return;
        }
        e.originalEvent.stopPropagation();
        e.originalEvent.preventDefault();
        if (    e.originalEvent.dataTransfer
             && (
                    (   e.originalEvent.dataTransfer.files
                    &&  e.originalEvent.dataTransfer.files.length > 0)
                ||  (   $.isArray(e.originalEvent.dataTransfer.types)
                    &&  e.originalEvent.dataTransfer.types.indexOf("Files") > -1)
                ||  (   e.originalEvent.dataTransfer.types
                    &&  !$.isArray(e.originalEvent.dataTransfer.types)
                    &&  e.originalEvent.dataTransfer.types.contains("Files"))
                )
            ){
                smartUploader.toggle();
        }
    });

    $('body').on('dragleave', function (e) {
        <?php // hack because if not breaks browser ?>
        if($('#customIframe').length > 0){
            return;
        }
        if (ie && !ie10){
            return;
        }
        e.originalEvent.stopPropagation();
        e.originalEvent.preventDefault();
        if (    e.originalEvent.dataTransfer
             && (
                    (   e.originalEvent.dataTransfer.files
                    &&  e.originalEvent.dataTransfer.files.length > 0)
                ||  (   $.isArray(e.originalEvent.dataTransfer.types)
                    &&  e.originalEvent.dataTransfer.types.indexOf("Files") > -1)
                 ||  (  e.originalEvent.dataTransfer.types
                    &&  !$.isArray(e.originalEvent.dataTransfer.types)
                    &&  e.originalEvent.dataTransfer.types.contains("Files"))
                )
            ){
                smartUploader.toggle();
            }
    });

Upvotes: 0

Views: 557

Answers (1)

Andreas
Andreas

Reputation: 21881

DataTransfer.types
...
As of Firefox 52, the DataTransfer.types property returns a frozen array of DOMStrings as per spec, rather than a DOMStringList.

The obsolete DomStringList type has a .contains() method but not an Array

Use .includes() or .indexOf() instead

if (e.originalEvent.dataTransfer.types.includes("Files")) { ... }

Or

if (e.originalEvent.dataTransfer.types.indexOf("Files") > -1) { ... }

Upvotes: 1

Related Questions