Drag&Drop de fichiers - accès à dataTransfer

**krunch** · 02/04/2015, 13h31

Bonjour

Je cherche à mettre en place un Drag&Drop de fichiers avec un 1er filtrage en fonction du type de fichier, au moment du Drag. C'est à dire que le Drag (et avant le Drop) affiche dans le dropper une info d'acceptation/rejet des fichiers déplacés.

Pour accéder aux fichiers c'est donc l'objet dataTransfer et sa propriété files, mais il semble que cette dernière ne soit accessible que depuis l'événement 'drop', en tous cas dans 'dragover' dataTransfer.files renvoie null :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
dropper.addEventListener('dragover', function(e) {
	e.preventDefault();
	console.log(e.dataTransfer.files);}, false);
}

Y a t-il une solution ou faut-il oublier cette idée ?

En vous remerciant par avance

**headmax** · 07/04/2015, 10h36

Salut, juste un petit exemple complet et vite fait ce qui n'est pas le cas de ton exemple , essaye de l'adapter a ton cas de figure et de l'améliorer a ta convenance.
Exemple qui autorise les formats images a modifier selon tes besoins directement en modifiant son tableau d'extensions.

Attention toute fois ceci n'est qu'un check au niveau js, tu ne dois pas omettre de faire la même chose niveau serveur car cette sécurité et très facilement détourné, donc un check supplémentaire niveau serveur doit OBLIGATOIREMENT être fait question de sécurité, j'ai volontairement pas créer de <form> ni de <input type="file"> je ne sais pas vraiment la finalité de ton projet si tu souhaite envoyer des fichiers au serveur au pas ...
css

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
      div {
        margin: 50px auto;
        text-align: center;
      }
 
      #deplacemoi {
        padding-top: 40px;
        width: 400px;
        height: 60px;
        border: 2px solid #222;
        background-color: #888;
      }

html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<body>
    <div id="deplacemoi">J'accepte les fichiers déplacés !</div>
</body>

js

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
//tableau d'extentions autorisées
var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];    
function validate(files) {
    var arrInputs = files;
    for (var i = 0; i < arrInputs.length; i++) {
        var oInput = arrInputs[i];
        console.log(oInput.type)
            var sFileName = oInput.name;
            if (sFileName.length > 0) {
                var blnValid = false;
                for (var j = 0; j < _validFileExtensions.length; j++) {
                    var sCurExtension = _validFileExtensions[j];
                    if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                        blnValid = true;
                        break;
                    }
                }
 
                if (!blnValid) {
                    alert("Désolez, " + sFileName + " n'est pas valide, les extensions autorisées sont : " + _validFileExtensions.join(", "));
                    return false;
                }
            }
 
        return false;
    }
 
    return true;
}
 
var dropper = document.querySelector('#deplacemoi');
 
    dropper.addEventListener('dragover', function(e) {
        e.preventDefault(); // Annule l'interdiction de "drop"
    }, false);
 
    dropper.addEventListener('drop', function(e) {
        e.preventDefault();
 
        var files = e.dataTransfer.files,
            filesLen = files.length,
            mimeType = [],
            filenames = "";
        if(validate(files)){
            for(var i = 0 ; i < filesLen ; i++) {
                mimeType[i] = files[i].type;
                filenames += '\n' + files[i].name + ' type : ' + mimeType[i];
            }
            console.log(files.length + ' fichier(s) :\n' + filenames);
        }else{
            console.log("Extension non autorisée");
        }
    }, false);

Exemple live...
https://jsfiddle.net/43z0a4jL/

Bonne continuation.

**krunch** · 07/04/2015, 19h11

Salut et merci pour ta réponse.
Ma question de base portait en fait sur la possibilité de déclencher validate() au moment du rollover (avant le mouseup) mais ça n'a pas l'air possible. Donc c'est effectivement ta démo qu'il faut faire et je suppose qu'on ne peut pas faire mieux.

Attention toute fois ceci n'est qu'un check au niveau js, tu ne dois pas omettre de faire la même chose niveau serveur car cette sécurité et très facilement détourné, donc un check supplémentaire niveau serveur doit OBLIGATOIREMENT être fait question de sécurité

Puisque tu en parles ... le test en effet est à moitié fiable (il porte juste sur l'extension qui peut être changée et même le mimetype n'est pas fiable) mais qu est ce qui peut être fait de mieux côté serveur ? Si c'est pour faire le même test en php ça n'apporte pas grand chose non ?
Il me semble que pour faire un test fiable il faut commencer à lire et parser le fichier (éventuellement en js d'ailleurs) ?

**headmax** · 08/04/2015, 10h28

Envoyé par krunch

Ma question de base portait en fait sur la possibilité de déclencher validate() au moment du rollover (avant le mouseup) mais ça n'a pas l'air possible. Donc c'est effectivement ta démo qu'il faut faire et je suppose qu'on ne peut pas faire mieux.

Salut,
Non il me semble qu'il ne soit pas possible dans ce contexte, nous disposons pas des événements sur les fichiers côtés OS dont seul l'événement drop (relâchement du cliquer-glisser) sur la zone active.

Envoyé par krunch;

Puisque tu en parles ... le test en effet est à moitié fiable (il porte juste sur l'extension qui peut être changée et même le mimetype n'est pas fiable) mais qu est ce qui peut être fait de mieux côté serveur ? Si c'est pour faire le même test en php ça n'apporte pas grand chose non ?
Il me semble que pour faire un test fiable il faut commencer à lire et parser le fichier (éventuellement en js d'ailleurs) ?

Disons que le test côté serveur est le plus important car celui-ci ne peux pas être modifié comme c'est le cas côté client js lors d'un simple envoie d'un formulaire ...
Pour ce qui concerne la sécurité niveau client-serveur, un formulaire dois avoir un système de "check" afin d'être sur que le formulaire envoyé provient bien du formulaire de ta page je rajoute un token que je met dans le tableau de session $_SESSION du client surtout pas dans la page du formulaire et lors du "submit" je compare le token générer côté serveur et la session du client est si les deux sont identiques j'autorise le POST ou GET PUT DELETE ...
De plus il faut bien checker les données en utf8 selon leur type surtout lorsqu'elle rentre en base de donnée ou qu'elle soit afficher (ouput) dans la page préférences pour le htmlentities si tu utilise php.
Beaucoup de script malicieux tente des intrusions en base64, hexa... donc renseigne toi sur les conduites à avoir face a ce type d'attaque, XSS, injection SQL... le web contient suffisamment d'information sur ces sujets, a toi de t'en prémunir.
Bonne continuation

**krunch** · 09/04/2015, 15h48

Ok, je partais du principe qu'un simple upload était moins dangereux qu'un envoi de formulaire mais je vérifierai tout ça ..
Merci bien pour toutes ces pistes.

Drag&Drop de fichiers - accès à dataTransfer

JavaScript

Discussions similaires

Partager

Partager