JavaScript drag and drop not triggering change event

I'm building a website that will have a file upload. It should be possible to both upload picture, and also to drag and drop.

I have a droparea, that opens a file input once clicked. Thereafter, it adds a new li where it is possible to delete the file.

However, I am not getting this to work with the drag and drop, no matter what I try. In this fiddle you can see what my challange is.. pressing the field opens up correctly, and I can add and delete files.

It does not work when I drag and drop though.

https://jsfiddle.net/k14fgo0a/

<div class="upload-area text-center ml-4 py-4" id="dropContainer">
  <i class="fa fa-upload mt-4 mb-2" style="font-size:50px"></i>
  <p class=" mt-1" id="uploadText" style="font-size:18px">Upload file / drag file
    here</p>
</div>
<ul class="list-group ml-4" id="attList">
  <li class="border-0 bg-transparent" style="list-style-type: none;">
    <input id="fileInput" value="%attachments%" type="file" name="attachment_0" class="attachment" />
  </li>
</ul>

window.addEventListener("drop", function (e) {
    e = e || event;
    $(".upload-area").removeClass("onHover");
    $("#uploadText").text("Upload file / drag file here");
    e.stopPropagation();
    e.preventDefault();
  }, false);


 $(document).ready(function () {
    $('#attList').on('change', '.attachment', function () {
      var currentInput = $(this);
      var inputName = currentInput.attr('name');
      var filename = currentInput.val().replace(/C:\\fakepath\\/i, '');
      currentInput.css('display', 'none');     
      $('<li>' + filename + '<button type="button" class="remove ml-2 remove btn btn-danger btn-sm">Delete</button></li>').insertBefore(currentInput);

      var idsInput = $('#attachment_ids');
      var ids = idsInput.val();
      if (ids != '')
        idsInput.val(ids + ',' + inputName);
      else
        idsInput.val(inputName);

      var number;
      var arr = inputName.split('_');
      if (arr.length > 1)
        number = parseInt(arr[1]);
      number += 1;

      $('<li class="mb-1" style="list-style-type: none;"><input id=\"fileInput\" class=\"' + currentInput.attr('class') + '\" type=\"file\" name=\"' + arr[0] + '_' + number + '\" /></li>').insertBefore(currentInput.closest('li'));
    });

any help would be appreciated!