Erreur upload fichier drag and drop

Version imprimable

Bonjour,

Lorsque je sélectionne des fichiers via "Parcourir", j'arrive à les uploader sur mon serveur.

Par contre, lorsque je les "drag and drop", impossible de les uploader.

Voici mes codes:

Index.html

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
<form id="upload" action="upload.php" method="POST" target="new" enctype="multipart/form-data">
 
<fieldset>
<legend>Charger un fichier</legend>
 
<input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000" />
 
<div>
	<label for="fileselect">Fichiers &agrave; charger:</label><BR><BR>
	<input type="file" id="fileselect" name="fileselect[]" multiple />
	<div id="filedrag">ou d&eacute;posez vos fichiers ici</div>
</div>
 
<div id="submitbutton">
 
  <!--<input type="submit" value="Ajouter">-->
	<button type="submit">Upload Files</button>
</div>
 
</fieldset>
 
</form>
 
<div id="messages">
<p>Status Messages</p>
</div>
 
<script src="filedrag.js"></script>

filedrag.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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
 
/*
filedrag.js - HTML5 File Drag & Drop demonstration
Featured on SitePoint.com
Developed by Craig Buckler (@craigbuckler) of OptimalWorks.net
*/
(function() {
 
	// getElementById
	function $id(id) {
		return document.getElementById(id);
	}
 
 
	// output information
	function Output(msg) {
		var m = $id("messages");
		m.innerHTML = msg + m.innerHTML;
	}
 
 
	// file drag hover
	function FileDragHover(e) {
		e.stopPropagation();
		e.preventDefault();
		e.target.className = (e.type == "dragover" ? "hover" : "");
	}
 
 
	// file selection
	function FileSelectHandler(e) {
 
		// cancel event and hover styling
		FileDragHover(e);
 
		// fetch FileList object
		var files = e.target.files || e.dataTransfer.files;
 
		// process all File objects
		for (var i = 0, f; f = files[i]; i++) {
			ParseFile(f);
		}
 
	}
 
 
	// output file information
	function ParseFile(file) {
 
		Output(
			"<p>File information: <strong>" + file.name +
			"</strong> type: <strong>" + file.type +
			"</strong> size: <strong>" + file.size +
			"</strong> bytes</p>"
		);
 
	}
 
 
	// initialize
	function Init() {
 
		var fileselect = $id("fileselect"),
			filedrag = $id("filedrag"),
			submitbutton = $id("submitbutton");
 
		// file select
		fileselect.addEventListener("change", FileSelectHandler, false);
 
		// is XHR2 available?
		var xhr = new XMLHttpRequest();
		if (xhr.upload) {
 
			// file drop
			filedrag.addEventListener("dragover", FileDragHover, false);
			filedrag.addEventListener("dragleave", FileDragHover, false);
			filedrag.addEventListener("drop", FileSelectHandler, false);
			filedrag.style.display = "block";
 
			// remove submit button
			//submitbutton.style.display = "none";
		}
 
	}
 
	// call initialization file
	if (window.File && window.FileList && window.FileReader) {
		Init();
	}
 
 
})();

Voyez-vous pourquoi?

Merci

Xavier

Citation:

Envoyé par Asdorve

lorsque je les "drag and drop", impossible de les uploader.

[…]

Voyez-vous pourquoi?

Oui, je vois pourquoi.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 // is XHR2 available? var xhr = new XMLHttpRequest(); if (xhr.upload) { // file drop filedrag.addEventListener("dragover", FileDragHover, false); filedrag.addEventListener("dragleave", FileDragHover, false); filedrag.addEventListener("drop", FileSelectHandler, false); filedrag.style.display = "block"; // remove submit button //submitbutton.style.display = "none"; }
À aucun moment le xhr n’est utilisé, ni dans ce if, ni dans les autres fonctions. En fait, à part un affichage des informations avec Output, ton script ne fait rien de concret.

L’envoi de fichiers avec XMLHttpRequest n’est pas très compliqué, il suffit de simuler le comportement normal du formulaire avec un FormData. Cet objet est quasiment magique, il fait tout le travail à notre place :)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ... let files = e.target.files || e.dataTransfer.files; let formData = new FormData(); for (let f of files) { ParseFile(f); formData.append("fileselect[]", f); } let req = new XMLHttpRequest(); // ajouter la gestion des évènements / erreurs ... ... ... req.open("POST", "upload.php"); req.send(formData);
N’oublie pas que tu peux inspecter les requêtes dans l’onglet réseau de la console F12.

Côté serveur, les données sont accessibles comme d’habitude via la variable $_FILES.

Note : Je pense que c’est une mauvaise idée de lancer immédiatement l’envoi des fichiers sur un évènement change de l’input ou au moment du drop. Il vaut mieux laisser à l’utilisatrice ou l’utilisateur le droit à l’erreur, en lui donnant la possibilité de voir les fichiers sélectionnés avant de valider l’envoi. C’est ce que fait par exemple le site Imgur.

(D’ailleurs, ce site fait quelque chose de malin : il intercepte les drops sur toute la page. C’est une bonne idée car sinon, un fichier déposé dans une page web à un endroit qui n’annule pas le drop va avoir divers effets indésirables, comme l’ouverture de nouveaux onglets ou le remplacement de la page actuelle.)

Également, ton code actuel n’agit pas sur l’évènement submit du formulaire, ce qui fait que celui-ci est envoyé de manière classique quand on clique sur le bouton submit. Je suggère que tu remplaces ton écouteur actuel de change sur l’input file, par un écouteur de submit sur le formulaire entier. Annule l’évènement avec preventDefault pour empêcher l’envoi classique.
Code:

1 2 3 4 5 document.querySelector("#upload").addEventListener("submit", function (submitEvent) { submitEvent.preventDefault(); ... });

20/06/2018, 14h46
Asdorve

Bonjour,

Merci pour ces informations.

Je prends tout ça en compte et je vais essayer de m'en sortir. ;)

Xavier