11484 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous
Beaucoup de sites proposent de faire de l'upload de fichiers par Drag and Drop, c'est à dire qu'on sélectionne les fichiers dans la liste des fichiers locaux et qu'on les dépose à la souris dans une zone de la page HTML Cela déclenche un script qui effectue l'envoi des fichiers par AJAX.
J'ai trouvé un exemple sur http://script-tutorials.developpez.com/tutoriels/html5/drag-drop-file-upload-html5/
Je constate que cela semble marcher correctement sur Chrome, mais pas sur FireFox
En mettant des traces dans le script, je constate que sur un drop, la valeur de event.dataTransfer est "null" sous FireFox alors qu'elle contient bien les informations, dont la liste des fichiers, sous Chrome
Quelqu'un aurait il une idée sur la façon de traiter ce problème, sachant que je n'ai besoin de faire fonctionner le mécanisme que sur Chrome et FireFox?

Je constate que la nouvelle version du site Alsacreations permet bien de charger des images, mais qu'il n'utilise pas le drag and drop.
Peut être y a-t-il une relation avec ce problème?
C'est la version la plus récente 54.0.1 (32 bits).
En fait, ça semble marcher si on ne met pas de point d'arrêt dans la fichier JS
Quand on met un point d'arrêt sur la ligne 50 de script.js,
processFiles(event.dataTransfer.files);

on voit que la valeur de dataTransfer est null, et ça plante immédiatement avec un message qui le signale.
Si je mets le même point d'arrêt sous Chrome, la valeur de dataTransfer est correcte
Bizarre...
je vais continuer à investiguer ce drôle de phénomène
Comme j'utilisais cette page comme modèle pour écrire mon propre code, et que -- comme de bien entendu -- il y avait des erreurs dans mon code, j'avais mis un point d'arrêt dans mon propre code sur l'instruction en cause.
Comme ça me disait que dataTransfer était null, j'ai mis le même point d'arrêt au même endroit dans le JS de la page modèle, et ça plantait de la même façon.
Mais en fait mes erreur étaient ailleurs, comme quoi un faux bug peut en cacher un vrai!