Discussion :

[lolalilo]

Bonjour,
je souhaiterai réaliser une interface web qui me permette d'uploader des image grace a un drag un drop, simplement.
Biensur j'ai effectuer des recherches assez poussez d'exemples en tout genre.

Mon idée est de me passer de jQuery, et de xhr, pour des raison qui me regarde et dont je ne debaterai pas ici

Mais je bloc sur un probleme.
Le code suivant, récupère un objet file lorsqu'un drag & drop est effectuer sur une petite div (#dropbox)
rien de bien sorcier
ensuite tout en js je créé une form, muni d'un input type file

Mais à ma grande surprise, input type file se montre bien mystérieux .
En effet assez naivement peut etre j'esperais qu'il me suffirai de placer mon objet récuperer précedement en value de mon input.
avec quelque chose comme ça :

Code :

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

inputvar.setAttribute('value', file);

mais l'input type file ne se comporte pas comme ça. Et je ne comprend pas comment input type file classique fonctionne pour transmettre un fichier et le récuperer en PHP avec la super global $_FILE.

Bref si quelqu'un avait une idée, merci de m'éclairer.


voir le code complet :

Code :

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
<script type="text/javascript">
window.onload = function() {
 
	var dropbox = document.getElementById("dropbox");
 
	dropbox.addEventListener("dragenter", dragenter, false);
	dropbox.addEventListener("dragover", dragover, false);
	dropbox.addEventListener("drop", drop, false);
	dropbox.addEventListener("drop", drop, false);
 
	function dragenter(e) {
	  e.stopPropagation();
	  e.preventDefault();
	}
 
	function dragover(e) {
	  e.stopPropagation();
	  e.preventDefault();
 
	  document.getElementById('dropbox').style.backgroundColor ='grey';
	} 
 
	function drop(e) {
	document.getElementById('dropbox').style.backgroundColor ='white';
 
	  e.stopPropagation();
	  e.preventDefault();
 
		var dt = e.dataTransfer;
		var files = dt.files;
 
		var form = document.createElement('form');
		form.setAttribute('method', 'post');
		form.setAttribute('action', 'upload.php');
		form.setAttribute('enctype','multipart/form-data');
 
		var inputvar = document.createElement('input');
		inputvar.setAttribute('type', 'file');
		inputvar.setAttribute('name', "my");
		/// inputvar.setAttribute('value', files); <--??? c'est là que ce pose mon problème comment faire passer l'objet file à l'input type file
 
		form.appendChild(inputvar);
		document.body.appendChild(form);
		form.submit();
	}
}
</script>

[SpaceFrog]

si on pouvait modifier le value d'une input type file ça ne serait même plus une faille, mais ce serait un trou noir de sécurité !!!!!

[lolalilo]

je lis dans la documentation W3C qu'un input type file creer un objet UploadFile, accessible depuis le dom si on connait l' id de notre input.
très bien, je modifie mon code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
...
var inputvar = document.createElement('input');
inputvar.setAttribute("type", "file");
inputvar.setAttribute("name", "my");
inputvar.setAttribute("id", "myInput");
 
form.appendChild(inputvar);
document.body.appendChild(form);
document.getElementById("myInput").value = files[0];
form.submit();

et là, malheur. Ma console me retourne une erreur de sécurité
POURQUOIIIII, on ne peut pas set the value of an input file

n'y a t'il qu'un xhr qui puisse me sauver ????

[SpaceFrog]

Dans quel but veux tu le modifier ?

[lolalilo]

Non bon, j'ai compris par moi même qu'il y avait une faille de sécurité.
Je viens de passer ma journée a-à comprendre que ce n'etait pas possible comme ça, (meme si l'idée n'etait pas bete en soit).

Tout les exemples que j'avais trouvé utilisait ajax, mais je ne suis pas vraiment familier d'ajax...
bref je vais devoir m'y coller..

[thelvin]

En réalité ce n'est plus une question de faille de sécurité.
Ce n'est pas moins dangereux d'uploader un fichier en AJAX qu'en le mettant dans un formulaire HTML.

C'est juste que ce n'est venu à l'idée de personne d'étendre l'API des formulaires pour qu'on puisse y ajouter un fichier obtenu par JavaScript. Ça complique les choses et ça sert à rien, puisqu'on peut faire la même chose en AJAX, que c'est une solution à bien plus de choses, et que ça existe déjà.

[SpaceFrog]

uploader un fichier en ajax n'est pas possible non plus ... xmlhttprequest ne converse qu'en string...