Empêcher le navigateur de charger un fichier glisser-déposer

J'ajoute un téléchargeur html5 glisser-déposer sur ma page.

Lorsqu'un fichier est déposé dans la zone de téléchargement, tout fonctionne très bien.

Cependant, si je dépose accidentellement le fichier en dehors de la zone de téléchargement, le navigateur charge le fichier local comme s'il s'agissait d'une nouvelle page.

Comment puis-je éviter ce comportement?

Merci!

Vous pouvez ajouter un écouteur d'événements à la fenêtre qui appelle preventDefault()tous les événements glisser-déposer.
Exemple:

window.addEventListener("dragover",function(e){
  e = e || event;
  e.preventDefault();
},false);
window.addEventListener("drop",function(e){
  e = e || event;
  e.preventDefault();
},false);

Après beaucoup de bidouilles, j'ai trouvé que c'était la solution la plus stable:

var dropzoneId = "dropzone";

window.addEventListener("dragenter", function(e) {
  if (e.target.id != dropzoneId) {
    e.preventDefault();
    e.dataTransfer.effectAllowed = "none";
    e.dataTransfer.dropEffect = "none";
  }
}, false);

window.addEventListener("dragover", function(e) {
  if (e.target.id != dropzoneId) {
    e.preventDefault();
    e.dataTransfer.effectAllowed = "none";
    e.dataTransfer.dropEffect = "none";
  }
});

window.addEventListener("drop", function(e) {
  if (e.target.id != dropzoneId) {
    e.preventDefault();
    e.dataTransfer.effectAllowed = "none";
    e.dataTransfer.dropEffect = "none";
  }
});

<div id="dropzone">...</div>

La définition des deux effectAllowet dropEffectinconditionnellement sur la fenêtre fait que ma zone de dépôt n'accepte plus aucun dnd, que les propriétés soient définies comme nouvelles ou non.

Pour jQuery, la bonne réponse sera:

$(document).on({
    dragover: function() {
        return false;
    },
    drop: function() {
        return false;
    }
});

Ici return falsese comportera comme event.preventDefault()et event.stopPropagation().

Pour autoriser le glisser-déposer uniquement sur certains éléments, vous pouvez faire quelque chose comme:

window.addEventListener("dragover",function(e){
  e = e || event;
  console.log(e);
  if (e.target.tagName != "INPUT") { // check which element is our target
    e.preventDefault();
  }
},false);
window.addEventListener("drop",function(e){
  e = e || event;
  console.log(e);
  if (e.target.tagName != "INPUT") {  // check which element is our target
    e.preventDefault();
  }  
},false);

essaye ça:

document.body.addEventListener('drop', function(e) {
    e.preventDefault();
}, false);

Empêcher toutes les opérations de glisser-déposer par défaut n'est peut-être pas ce que vous souhaitez. Il est possible de vérifier si la source de glissement est un fichier externe, au moins dans certains navigateurs. J'ai inclus une fonction pour vérifier si la source de glissement est un fichier externe dans ce réponse StackOverflow .

En modifiant la réponse de Digital Plane, vous pouvez faire quelque chose comme ceci:

function isDragSourceExternalFile() {
     // Defined here: 
     // https://stackoverflow.com/a/32044172/395461
}

window.addEventListener("dragover",function(e){
    e = e || event;
    var IsFile = isDragSourceExternalFile(e.originalEvent.dataTransfer);
    if (IsFile) e.preventDefault();
},false);
window.addEventListener("drop",function(e){
    e = e || event;
    var IsFile = isDragSourceExternalFile(e.originalEvent.dataTransfer);
    if (IsFile) e.preventDefault();
},false);

Remarque: bien que l'OP n'ait pas demandé de solution angulaire, je suis venu ici à la recherche de cela. Il s'agit donc de partager ce que j'ai trouvé être une solution viable, si vous utilisez Angular.

D'après mon expérience, ce problème survient pour la première fois lorsque vous ajoutez une fonctionnalité de suppression de fichier à une page. Par conséquent, mon avis est que le composant qui ajoute cela devrait également être responsable de la prévention des chutes en dehors de la zone de largage.

Dans ma solution, la zone de dépôt est une entrée avec une classe, mais tout sélecteur non ambigu fonctionne.

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';
    }
  }
}

Les écouteurs sont ajoutés / supprimés automatiquement lorsque le composant est créé / détruit, et les autres composants utilisant la même stratégie sur la même page n'interfèrent pas les uns avec les autres en raison de stopPropagation ().

Pour construire sur la méthode «vérifier la cible» décrite dans quelques autres réponses, voici une méthode plus générique / fonctionnelle:

function preventDefaultExcept(predicates) {
  return function (e) {
    var passEvery = predicates.every(function (predicate) { return predicate(e); })
    if (!passEvery) {
      e.preventDefault();
    }
  };
}

Appelé comme:

function isDropzone(e) { return e.target.id === 'dropzone'; }
function isntParagraph(e) { return e.target.tagName !== 'p'; }

window.addEventListener(
  'dragover',
  preventDefaultExcept([isDropzone, isntParagraph])
);
window.addEventListener(
  'drop',
  preventDefaultExcept([isDropzone])
);

J'ai un HTML object(embed ) qui remplit la largeur et la hauteur de la page. La réponse de @ digital-plane fonctionne sur des pages Web normales, mais pas si l'utilisateur tombe sur un objet incorporé. J'avais donc besoin d'une solution différente.

Si nous passons à l'utilisation de la phase de capture d'événements, nous pouvons obtenir les événements avant que l'objet intégré ne les reçoive (notez la truevaleur à la fin de l'appel de l'écouteur d'événements):

// document.body or window
document.body.addEventListener("dragover", function(e){
  e = e || event;
  e.preventDefault();
  console.log("over true");
}, true);

document.body.addEventListener("drop", function(e){
  e = e || event;
  e.preventDefault();
  console.log("drop true");
}, true);

En utilisant le code suivant (basé sur la réponse de @ digital-plane), la page devient une cible de glissement, elle empêche les incorporations d'objets de capturer les événements, puis charge nos images:

document.body.addEventListener("dragover", function(e){
  e = e || event;
  e.preventDefault();
  console.log("over true");
}, true);

document.body.addEventListener("drop",function(e){
  e = e || event;
  e.preventDefault();
  console.log("Drop true");

  // begin loading image data to pass to our embed
  var droppedFiles = e.dataTransfer.files;
  var fileReaders = {};
  var files = {};
  var reader;

  for (var i = 0; i < droppedFiles.length; i++) {
    files[i] = droppedFiles[i]; // bc file is ref is overwritten
    console.log("File: " + files[i].name + " " + files[i].size);
    reader = new FileReader();
    reader.file = files[i]; // bc loadend event has no file ref

    reader.addEventListener("loadend", function (ev, loadedFile) {
      var fileObject = {};
      var currentReader = ev.target;

      loadedFile = currentReader.file;
      console.log("File loaded:" + loadedFile.name);
      fileObject.dataURI = currentReader.result;
      fileObject.name = loadedFile.name;
      fileObject.type = loadedFile.type;
      // call function on embed and pass file object
    });

    reader.readAsDataURL(files[i]);
  }

}, true);

Testé sur Firefox sur Mac.

J'utilise un sélecteur de classe pour plusieurs zones de téléchargement, donc ma solution a pris cette forme moins pure

Basé sur la réponse d'Axel Amthor, avec une dépendance sur jQuery (alias $)

_stopBrowserFromOpeningDragAndDropPDFFiles = function () {

        _preventDND = function(e) {
            if (!$(e.target).is($(_uploadBoxSelector))) {
                e.preventDefault();
                e.dataTransfer.effectAllowed = 'none';
                e.dataTransfer.dropEffect = 'none';
            }
        };

        window.addEventListener('dragenter', function (e) {
            _preventDND(e);
        }, false);

        window.addEventListener('dragover', function (e) {
            _preventDND(e);
        });

        window.addEventListener('drop', function (e) {
            _preventDND(e);
        });
    },