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

Question

J'ai une page (en Angulaire 4) où il y a un composant glisser-déposer (ng2-filedrop). Le glisser-déposer fonctionne bien mais quand je fais glisser un fichier et déposez-le dans la page autre que le composant glisser-déposer, il ouvre le fichier dans cette page.

Est-il possible de désactiver la suppression de fichiers ailleurs ou est-il possible d'ouvrir le fichier dans un autre onglet du navigateur?

Answer 1

Vous pouvez le faire en redéfinissant la dragover et drop cas de l'objet window global qui appelle preventDefault() pour prévenir les comportements de chute par défaut glisser & du navigateur.

Ajouter ci-dessous extrait de code à la méthode ngOnInit() de votre app.component.ts:

ngOnInit(): void { 
    window.addEventListener("dragover", e => { 
    e && e.preventDefault(); 
    }, false); 
    window.addEventListener("drop", e => { 
    e && e.preventDefault(); 
    }, false); 
} 

Ce n'est pas ma propre réponse, vous pouvez voir la réponse originale et plus de discussions à Prevent browser from loading a drag-and-dropped file