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...

[thelvin]

Hum. À vue de nez tu expliqueras ça à Mega et Google Drive, déjà.

Sinon, c'est vrai qu'à l'époque où je le faisais, j'utilisais des techniques non-standard pour encoder le fichier en base64 et l'envoyer sous forme de string, et ça marchait très bien.

Mais depuis, tout semble indiquer que xmlhttprequest gère l'envoi de Blob, et un File est un Blob.

[SpaceFrog]

Blob = binaire du fichier
le protocole ajax ne gerant que du string il est donc en effet possible de passer un fichier sous forme de string et le sauvegarder coté serveur. Avec cependant les limitations de tailles de string transférable avec ajax.
Mais cela reste de la bidouille

[thelvin]

Blob = binaire du fichier

Et vu que xmlhttprequest accepte de prendre ça en paramètre de send(), envoyer un fichier sous sa forme binaire fonctionne parfaitement.

le protocole ajax ne gerant que du string

Où ça ?

[SpaceFrog]

La question complementaire est comment récupères tu le code binaire du fichier en js coté client ?

[thelvin]

C'est dans le titre : drag & drop.
Ça marche aussi en le récupérant d'un input file, mais bon, la question présente était de faire l'inverse.
Il y aurait aussi comme résultat d'une autre requête AJAX.

[SpaceFrog]

???
je ne vois toujours pas comment on peut recupérer en drag drop ou depuis un input file le contenu binaire d'une fichier local ...

[lolalilo]

à en croire vos message, ma question n'etait pas si bete au fond.
et c'est bien ce que je redoutais, utiliser AJAX estun peu plus compliqué, que la solution que j'esperais.

bref pour ceux que ca interresserai voici le lien qui me sauve la vie
http://www.sitepoint.com/html5-ajax-file-upload/

tout le monde

[Invité]

bonjour

utilise FormData

[SpaceFrog]

Ha ok html5

donc pas <IE9 ... c'est encore trop restrictif pour moi

[thelvin]

utilise FormData

Je ne vois pas comment. Tu as un exemple ?

[Bovino]

Il y aura bien entendu toujours besoin d'un input file, mais ça donnerait un truc du genre

Code :

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

1
2
3
var formData = new FormData();
var fileData = document.getElementById('input_file');
formData.append(fileData.name, fileData.files[0]);

tu peux ensuite envoyer cet objet formData via AJAX :

Code :

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

xhr.send(formData);

[thelvin]

Ah, je croyais que c'était pour répondre à la question : mettre des fichiers obtenus par drag & drop dans le formulaire pour l'envoyer sans AJAX.

[Bovino]

Ah ben non, ça ce n'est pas possible comme déjà expliqué car le value d'un input file est readonly (en fait, techniquement, c'est surtout la propriété files qui l'est, mais ça revient au même).