Запретить браузеру загружать файл с перетаскиванием

Примечание: , Хотя OP не попросил Угловое решение, я приехал, сюда ища это. Таким образом, это должно совместно использовать то, что я нашел, чтобы быть эффективным решением, если Вы используете Угловой.

, По моему опыту, эта проблема сначала возникает, когда Вы добавляете функциональность отбрасывания файла к странице. Поэтому мое мнение - то, что компонент, который добавляет это, должен также быть ответственен за предотвращение отбрасывания за пределами зоны отбрасывания.

В моем решении зона отбрасывания является входом с классом, но любыми однозначными селекторными работами.

import { Component, HostListener } from '@angular/core';
//...

@Component({
  template: `
    <form>
      <!-- ... -->
      <input type="file" class="dropzone" />
    </form>
  `
})
export class MyComponentWithDropTarget {

  //...

  @HostListener('document:dragover', ['$event'])
  @HostListener('drop', ['$event'])
  onDragDropFileVerifyZone(event) {
    if (event.target.matches('input.dropzone')) {
      // In drop zone. I don't want listeners later in event-chain to meddle in here
      event.stopPropagation();
    } else {
      // Outside of drop zone! Prevent default action, and do not show copy/move icon
      event.preventDefault();
      event.dataTransfer.effectAllowed = 'none';
      event.dataTransfer.dropEffect = 'none';
    }
  }
}

слушатели добавляются/удаляются автоматически, когда компонент создается/уничтожается, и другие компоненты с помощью той же стратегии на той же странице не вмешиваются друг в друга из-за stopPropagation ().