TROLL INSIDE

Wow, la programmation fonctionnelle revient à la mode pour plein de raisons...

Donc, après avoir poussé au cul pour adopter la POO qu'est trop bien que les frameworks c'est le top pis toussa, on revient en arrière en utilisant les arguments de l'époque où on défendait la PF.

On remballe du vieux pour faire du neuf révolutionnaire: on se croirait dans l'éducation nationale, mon gars !

Omagad, c'est tellement ça !

The mental model for Git is needlessly complex Git provides a poor user experience

Ha ! Je ne suis pas tout seul... Pour moi, GIT c'est de la magie: peu intuitif, impossible à mémoriser, tu comprends pas quand ça merde, tu comprends pas pourquoi ça marche...

Note pour la prochaine fois que je voudrai faire un drag & drop de fichiers sur Firefox

Comme découvert grâce à ArthurHoaro, pour obliger le navigateur à gérer le drop de fichier sur une dropzone, il faut d'abord faire un preventDefault() sur les événements dragover et/ou dragenter.

solution N°1

On peut le faire en dur dans le HTML:

<div ondragover="return false">
<div ondragover="event.preventDefault()">

Ce qui peut même servir pour le ciblage du drop avec un sélecteur genre *[ondragover]

Solution N°2

On peut bien entendu également le définir directement dans le js:

document.getElementById("body").addEventListener("drop",function(e){
        console.log(e);
        e.preventDefault();
        e.stopPropagation();
})
document.getElementById("body").addEventListener("dragover",function(e){
        e.preventDefault();
        e.stopPropagation();
})
document.getElementById("body").addEventListener("dragenter",function(e){
        e.preventDefault();
        e.stopPropagation();
})

Sources:

• https://stackoverflow.com/questions/8006715/drag-drop-files-into-standard-html-file-input
• https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#droptargets

Se fabriquer des outils Dev avec des bookmarklets... moui, mais la politique CORS va bloquer tout chargement de script extérieur à celui sur lequel on déclenche le bookmarklet, non ?!

Et ben si:

Sous ce titre, qui siérait au conte d'un Lafontaine geek, se cache un des plus grands mystères de l'univers observable qui, pourtant, ne semble concerner que môa...

Quand je cherche à drag et drop un fichier sur un élément HTML pour en gérer l'upload via JS, je fais tout bien comme on m'a expliqué dans les tutos, les stackoverflow pis toussa:

// Une page de test qui est censée permettre de capter l'événement Drop sur un body id="body"
// version simplifiée et sans lib de mon problème
document.getElementById("body").addEventListener("drop",function(e){
        console.log(e);
        e.preventDefault();
        e.stopPropagation();
})

Hélas, quand je drope un fichier sur ma page, Firefox charge le fichier et l'affiche (ou en lance le téléchargement)

En plus, comme le chargement casse tout, impossible de vérifier dans la console que l'événement se déclenche bien dans js (même en conservant les journaux)...

• Ça ne vient pas d'une extension, j'ai testé en mode sans échec.
• Ça ne vient pas de ce firefox, j'ai essayé avec Waterfox, c'est pareil...
• Ça ne vient pas de cet ordi (je ne m'étonnerais plus de rien) j'ai testé sur un autre...

Je me rappelle que j'ai déjà rencontré le souci à chaque fois que j'ai voulu faire ça mais impossible de me souvenir comment j'ai fait pour y parvenir... pire, j'ai regardé mes scripts précédents qui semblent fonctionner et il n'y a rien de particulier dedans...

EDIT:

MErci à ArthurHoaro qui me fournit une solution qui consiste à faire un preventDefault sur l'event Dragover plutôt que sur le drop. C'est pas logique, mais ça marche !

// Une version qui va bien et qui explique pourquoi les autres codes fonctionnent: ils gèrent tous le dragover !
document.getElementById("body").addEventListener("drop",function(e){
        console.log(e);
        e.preventDefault();
        e.stopPropagation();
})
document.getElementById("body").addEventListener("dragover",function(e){
        e.preventDefault();
        e.stopPropagation();
})

En plus, ils en parlent là : https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#droptargets (mais je le découvre APRÉS, bien entendu)