I have this code :
<!DOCTYPE html>
<html>
<head>
<title>Drag-Drop tests</title>
<meta charset="UTF-8">
</head>
<body>
<script>
var body = document.body;
var cursor = document.createElement("div");
cursor.innerText = "Contenus des fichiers :\n";
cursor.ondragover = e => e.preventDefault();
cursor.ondrop = function(e) {
e.preventDefault();
if (e.dataTransfer.items) {
for (var i = 0; i < e.dataTransfer.items.length; i++) {
if (e.dataTransfer.items[i].kind === "file") {
var file = e.dataTransfer.items[i].getAsFile();
file.cursor = document.createElement("p");
body.appendChild(file.cursor);
file.cursor.innerText = file.name + " contient :";
file.text().then(function(value) {
file.cursor.innerText += " " + value;
});
}
}
}
else {
for(var i = 0; i < e.dataTransfer.files.length; i++) {
var file = e.dataTransfer.files[i];
file.cursor = document.createElement("p");
body.appendChild(file.cursor);
file.cursor.innerText = file.name + " contient :";
file.text().then(function(value) {
file.cursor.innerText += " " + value;
});
}
}
};
body.appendChild(cursor);
</script>
</body>
</html>
As is, if I drop two files on the div element, I get this output :
Contenus des fichiers :
File1.txt contient :
File2.txt contient : Content of file 1 Content of file 2
In file.text().then function, "file" refers to the last file reference declared.
If I replace file.cursor.innerText += by this.cursor.innerText += I get this output :
Contenus des fichiers :
Content of file 1 Content of file 2
File1.txt contient :
File2.txt contient :
In file.text().then function, "this" refers to the first caller, that is, the div itself.
Is there any way to get this :
Contenus des fichiers :
File1.txt contient : Content of file 1
File2.txt contient : Content of file 2
Keeping anonymous nested functions as param for callers.
I know that then does not occurs at the time I define it's callback. I would like to know if I can attach some data to an object and retrieve it on a callback execution.
Thx by advance.