Affecting DataTransfer.types is now DOMStringList instead of Array

Published: | Categories: DOM

Description

Firefox was previously returning a DOMStringList for the DataTransfer.prototype.types property. Firefox 52 and above will return a simple Array of DOMStrings in order to comply with the current HTML spec. That means the contains method no longer works on the property; the includes method should be used instead to check if a specific type of data is provided.

For the backward compatibility, you can use the spread syntax like this:

document.body.addEventListener('drop', event => {
  event.preventDefault();

  if ([...event.dataTransfer.types].includes('text/html')) {
    // Do something
  }
});

Update: Drag and Drop of attachments in JIRA is broken due to this change. Atlassian has fixed the issue; see this thread for the solution.

References