Custom drag and drop Javascript does not work in firefox

Firefox only triggers the change event if the user directly changes the file field, unlike Chrome.

What you can do is trigger the event manually in the removeDragData() function, but this will trigger the change event 2 times in Chrome. To prevent the event from being triggered 2 times in Chrome, you can use a control variable. If the variable is true , the event function is ignored with a return , if false executes the function and changes the value to true and a setTimeout() of 1 second changes back to false . This way, when the event is triggered the second time it will enter return and exit the function.

Add a trigger at the end of the removeDragData(ev) function:

function removeDragData(ev) {
    if (ev.dataTransfer.items) {
        ev.dataTransfer.items.clear();
    } else {
        ev.dataTransfer.clearData();
    }

    $('#xmlEnvio').trigger('change');
}

Create a control (global) variable:

var mudou;

And at the beginning of the change event function insert 3 lines that treat the variable:

if(mudou) return;
mudou = true;
setTimeout(function(){ mudou = false }, 1000);

At the end, the code looks like this:

function dropHandler(ev) {
   ev.preventDefault();
   var file;

   if (ev.dataTransfer.items) {
      for (var i = 0; i < ev.dataTransfer.items.length; i++) {
         if (ev.dataTransfer.items[i].kind === 'file') {
            document.querySelector('#xmlEnvio').files = ev.dataTransfer.files;
         }
      }
   } 
   removeDragData(ev)
}

function dragOverHandler(ev) {
    ev.preventDefault();
}

function removeDragData(ev) {
    if (ev.dataTransfer.items) {
        ev.dataTransfer.items.clear();
    } else {
        ev.dataTransfer.clearData();
    }

    $('#xmlEnvio').trigger('change');
}

var mudou;

$('#xmlEnvio').change(function(e){

   if(mudou) return;
   mudou = true;
   setTimeout(function(){ mudou = false }, 1000);

    alert('chrome works');
    var input = this;
    file = input.files[0];
    $('.form-control.image-preview-filename').val(file.name);

    var reader = new FileReader();
    reader.onload = function() {
        var parsed = new DOMParser().parseFromString(this.result, "text/xml");

        console.log(parsed);
    }
    reader.readAsText(file);
    console.log('... file[' + 0 + '].name = ' + file.name);
});

In Firefox, in this section, when you arrow the files in the input, the event is not triggered, in chrome it is automatically triggered.

document.querySelector('#xmlEnvio').files = ev.dataTransfer.files;

To fire manually, you can use the following code

document.querySelector('#xmlEnvio').dispatchEvent(new Event('change'));

The problem is that it will fire twice in Chrome.

But remember that you do NOT need to use the input to parse the XMLs. You can parse directly in dropHandler

function dropHandler(ev) {
    ev.preventDefault();

    const file = ev.dataTransfer.files[0];
    if ( ! file) return;

    const reader = new FileReader();
    reader.onload = function() {
        var parsed = new DOMParser().parseFromString(this.result, "text/xml");

        console.log('RESULT', parsed);
    }
    reader.readAsText(file);

    removeDragData(ev);
}

Editing: This way you can take advantage of cross-browser code and work:)

function parseXML(file) {
    const reader = new FileReader();
    reader.onload = function() {
        const parsed = new DOMParser().parseFromString(this.result, "text/xml");

        console.log('RESULT', parsed);
    }
    reader.readAsText(file);
}

function dropHandler(ev) {
    ev.preventDefault();
    const file = ev.dataTransfer.files[0];
    parseXML(file);
    removeDragData(ev)
}

function dragOverHandler(ev) {
    ev.preventDefault();
}

function removeDragData(ev) {
    if (ev.dataTransfer.items) {
        ev.dataTransfer.items.clear();
    } else {
        ev.dataTransfer.clearData();
    }
}

$('#xmlEnvio').change(function(e){
    var input = this;
    const file = input.files[0];
    if ( ! file) return;

    parseXML(file);
});