Drag&Drop de fichiers - accès à dataTransfer
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:
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
Petit exemple un peu tiré par les cheveux ...
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:
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:
1
2
3
4
|
<body>
<div id="deplacemoi">J'accepte les fichiers déplacés !</div>
</body> |
js
Code:
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.
