Bonjour � tous !!!

Je suis en train de programmer un upload et souhaiterai le rendre le plus maniable possible.

C'est � dire, non pas simplement s�lectionn�s un ou plusieurs fichiers lors d'un clic, mais pouvoir cr�er une liste de fichier � t�l�charger.

Et oui, si on clic sur le bouton "parcourir" pour ajouter 2 photos, et que l'on veut en rajouter une autre qui est dans un autre dossier de son ordinateur, si l'on ne cr�� pas de liste, seul le/les derniers s�lectionner seront dan le "input type=file" et t�l�charger.

J'aimerai donc programmer mon "FileUpload" comme celui pr�sent� par JQuery.

Vous pourriez bien vous demander pourquoi je ne prends donc celui-ci.

- 1 : Je n'arrive pas � le faire fonctionner (j'ai t�l�charger le zip et fait des tests sur les diff�rentes pages fournisses (index, angular, basic, etc) et lorsque que je s�lectionnais un fichier aucun d'eux n�apparaissaient dans la liste - Preview -), alors que �a fonctionne sur leur site.

- 2 : il y a du code partout, plein de fichier JS, et c'est tr�s difficile de d�chiffrer l'int�rieur des fonctions.

- 3 : J'aimerai savoir le faire, plut�t que d'utiliser sans comprendre. (surtout que je n'arrive pas � l'impl�menter).

Voila o� J'en suis :

Html :

Code html : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
5
6
7
8
9
10
11
12
13
<form method="POST" action={{ path('updatePicksSend') }} enctype="multipart/form-data">
	 <input type="hidden" name="MAX_FILE_SIZE" value="20000000">
   	<label>Fichier :</label> <input type="file" id="fileInput" name="fichier[]" multiple accept="image/*">
   	<table id="tableFiles" style="{background-color:red, width:400px, height:400px}">
   		<tbody class="classTableFiles"></tbody>
   	</table>
	<div class="adhesion_button">
	     	<input type="submit" name="envoyer" value="Envoyer le fichier" class="next_step" id="subFile">
	</div>
</form>
</div>
 
<input type="submit" name="envoyerAjax" value="Envoyer le fichier ajax" id="subFileAjax">

NB : J'ai deux boutons, un (subfile) qui envoie le formulaire directement (pour tester) et l'autre (subFileAjax) qui devrait envoyer la liste des fichiers d�sir�s.

Javascript

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
document.getElementById('fileInput').addEventListener( 'change', getFiles, false );
document.getElementById('subFileAjax').addEventListener( 'click', seeFilesAjax, false );
//Liste des fichiers sélectionnés
var fileAll = new Array();
//compteur
var cpt = 0;
 
//liste des noms de fichier
var nameFile = new Array();
var allowedTypes = ['png', 'jpg', 'jpeg', 'gif'];
 
// Faire le preview et mettre les fichiers en liste
function getFiles(evt)
{
    var files = evt.target.files;
 
    for( var i = 0; i < files.length; i++ )
    {
    	imgType = files[i].name.split('.');
        imgType = imgType[imgType.length - 1].toLowerCase(); // On utilise toLowerCase() pour éviter les extensions en majuscules
 
        if(allowedTypes.indexOf(imgType) != -1) 
        	{
        msg += "- " + files[i].name + " (" + files[i].size + " octets)\n";
 
        fileAll.push(files[i]);
 
               // Faire un preview
     		var reader = new FileReader;
            reader.onload = function(event) {
 
        		var nb = Math.floor(Math.random() * 1000);
 
        	    var idom ='img'+nb; 
        	    var inpt ='inpt'+cpt; 
        	    cpt++;
 
            	fileData.append(''+inpt+'', files[i]);
            	nameFile.push(inpt);
 
    		$('.classTableFiles').append("<tr><td><img id="+idom+" src="+'#'+" /></td>"+"<td><input id = "+inpt+" type="+'file'+" style='visibility: default;' value="+files[i]+" name="+inpt+"></td>"+"</tr>");
    					$('#'+idom+'')
    		            .attr('src', event.target.result)
    		            .width(130);
 
    		            var ttt=$('#'+inpt+'').attr('name');
    		            alert(ttt+" idom "+idom);
 
                       // Il faudra rajouter un bouton pour supprimer une image sélectionnée
 
 
            }; //reader onload
            reader.readAsDataURL(files[i]);
 
        	}//if allowedtypes
    }//for files
 
    // On affiche le message pour tester
    alert(msg);
 
    var msgs = "- :";
    for( var i = 0; i < fileAll.length; i++ )
    {
        msgs +=fileAll[i].name;
    }
    alert(msgs);
}
Le d�but de la fonction php qui va recevoir la liste/formulaire

PHP:
Code php : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
5
6
7
8
9
if(!empty($_POST))
{
	// On verifie si le champ est rempli
	$objILOC = $_FILES['filesToUpload'];
	for ($i=0; $i<count($objILOC); $i++)
	{
		$logger->info('UpdateAccountController - updatePicksSendF files : '.$objILOC[$i]['name']);
	}
etc...


L'envoie de la liste :

=> Via xhr :
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
function seeFilesAjax(evt)
{
	/*var fileAj =JSON.stringify(fileAll);
	var nameFj =JSON.stringify(nameFile);
 
	var fileA = encodeURIComponent(fileAj);
	var nameF = encodeURIComponent(nameFj);*/
 
	var data = new FormData();
 
	for(var i=0, len=fileAll.length; i<len; i++) {
		data.append("filesToUpload", fileAll[i]);	
	}
 
	var xhr = getXMLHttpRequest(); //récupére un xhr si possible
 
	xhr.open("POST", "{#{ path('updatePicksSendF') }#}", true);
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	//xhr.send("fileA="+fileA+"&nameF="+nameF+"&data="+data);
	xhr.send(data);
 
	xhr.onload = function() {
        alert('Upload terminé !');
    };
Pb PHP : "filesToUpload" n'est pas reconnu

exception 'ErrorException' with message 'Notice: Undefined index: filesToUpload

=> via Ajax
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
function seeFilesAjax(evt)
{
var data = new FormData();
	for(var i=0, len=fileAll.length; i<len; i++) {
		data.append("filesToUpload", fileAll[i]);	
	}
$.ajax({
	  url: Routing.generate('updatePicksSendF', {'filesToUplaod': data }),
	  type:'POST',
	  dataType: 'json'
})
  .done(function(json) {
    var inf = json.info;
    if(inf == "")
	{
		alert(json.message); 
	}
  })
	.fail(function(json){
		json = JSON.parse(json);
		alert(json.info+" -- "+json.message);
	var inf = json.result;
  	alert('Erreur: '+inf);
  });
}
Pb PHP : Le test "if(!empty($_POST))" retourne "faux", aucun post n'est envoy�.

Et si je d�place "{'filesToUplaod': data}" et mets plut�t data (FormData):
Code : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
type:'POST',
data: data,
J'ai l'erreur :
TypeError: 'append' called on an object that does not implement interface FormData.
Je pr�f�rerais ajax � xhr, ce dernier �tant moins compatible, si j'ai bien vu.

Il y a donc des successions d'erreurs, essayant plusieurs fa�on de faire/ bien faire/ mieux faire / d�j� faire !

Quelques question g�n�ral aussi :

- Suis-je bien partis dans la conception ?
- Peut-on faire ce que je souhaite ? (FileUpload de jquery semble le faire sur la d�mo de son site).
- Cr�� une liste de fichier s�lectionn�, dans javascript, est-il s�curitaire pour le client et le serveur ?
- Je r�fl�chis d�j� � pouvoir supprimer une image s�lectionn�e et int�grer une barre de progression. Feriez-vous autrement sur la notion "d'identifiant" pour retrouver le fichier � supprimer dans la liste?

NB : J'ai vu plusieurs autres Uplaoder File tout fait int�grant du flash (swf), mais je reste sceptique dessus. Sur mon ordi perso, le flash plante des fois, rarement maintenant, �a arrive (je suis sur firefox), alors je n'ai pas trop envie actuellement de partir sur cette solution. (surtout sur les vieux ordis et navigateurs)

Merci d'avoir d�j� lu.