Le panda roux, l'event Drop et le preventDefault() [RÉSOLU]

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)

Pour faire simple  le preventDefault ne prevent absolument rien  le con.jpg

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)...

Ha ça  les autres dragenter dragleave & consorts  eux  ils sont impeccablement gérés    Mais le drop  dans ton cul  si j ose dire   .jpg

  • Ç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...

Je sens bien que ça doit venir de moi  notez   .jpg

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)

Touit du Mardi 30 Janvier 2018 à 17:31:12 PYTHON !!!

Je relaie mon appel mastodon ici, pour les ceusses qui ne me suivent pas sur le pachyderme...

Salut les mammouths et la #teamVieux !
Je cherche à me mettre à python et j'aimerais bien un GUI designer simple, kiss et intuitif, un peu du genre de notre cher vieux Visual basic *soupir nostalgique)

J'aimerais bien dessiner l'interface et attacher des fonctions/méthodes aux événements des objets de l'interface (bouton->clic->fais ça)


Je ne suis pas super convaincu (en un seul mot #jeuDeMotToutPété) par QT designer, qui me semble un peu touffu et peu intuitif...

Une idée ?!

Firefox et le drag/drop de fichier, ça fait chier...

RHAAAAAAA CON DE FIREFOX ! J'arrive pas à récupérer les fichiers déposés pour les ajouter dans un input[file]... pourtant ça marche nickel sous Chromium !

document.getElementById('selector_0').files=event.dataTransfer.files;

La console me prouve que event.datatransfert.files est correct mais impossible de transférer sa valeur à l'input !

Pourtant, même StackOverflow dit que (ça marche sous Firefox)[https://stackoverflow.com/a/38968948] !

J'en suis à mon 3ème gigaoctet de doc consultée, je commence à voir flou... 'Tain, chez Mozilla, faites un effort, on se croirait à la glorieuse époque d'IE6

Une idée, les copains ?

function stopPropagation(event){
    if(event.preventDefault) { event.preventDefault(); }
    if(event.stopPropagation) { event.stopPropagation(); }
}

dropzone.addEventListener("drop", function(event){
    stopPropagation(event);
    document.getElementById('selector_0').files=event.dataTransfer.files;
    console.log(event.dataTransfer.files,document.getElementById('selector_0').files);
    return false;
}, false);

(...)

Fil RSS des articles