Compréhension du mécanisme FileReader

Version imprimable

Bonjour,

Je ne comprends pas bien comment fonctionne FileReader.
J'ai lu plusieurs doc et tutos, vu des exemples descriptifs mais pas explicatifs !
Cela se borne à dire de "faire comme ça" et c'est tout, sans aller dans l'explication du mécanisme. Bon, je me doute que c'est de ma faute, mais je ne sais pas ou chercher !!!
Voici un exemple de mon code pour lire un fichier en local :
Code:

1 2 3 4 5 6 7 8 function verif_file() { var fileInput = document.querySelector('#fichier'); var reader = new FileReader(); reader.onload = function() { alert(reader.result) ; ret=reader.result} reader.readAsText(fileInput.files[0]); alert(ret) ; return false ; }
Lorsque je choisis un fichier et que se lance la fonction verif_file(), le premier "alert()" dans le reader.onload me donne ce que je veut mais l'affectation à ret ne fonctionne pas car le alert(ret) me rend ensuite une chaine vide !
Je me dis que l'objet ret n'est pas connu dans la fonction donc je fais un var ret = "" avant d'appeler reader.onload() mais même résultat. J'ai essayé de déclarer le ret en global en dehors de toute fonction mais pareil !
Je ne comprend pas comment récupérer ret en dehors du reader.onload() !
Je pense qu'il s'agit d'une closure on un truc comme ça mais je n'arrive pas à voir comment cela fonctionne.
Merci !

01/10/2012, 11h29
devyan

Bonjour,

As-tu essayé d'inverser ta séquence en affectant d'abord ret ?

Code:

ret=reader.result; alert(res);

Sinon, es-tu certain que reader.readAsText() a un fonctionnement synchrone et donc que reader.onload() est bien exécuté avant ton alert(ret) de la ligne 6 ?

devyan
01/10/2012, 11h49
fabrice91

oui, j'ai interverti en affectant d'abord la variable puis en faisant un alert sur la variable dans la fonction onload() et j'ai le bon comportement.
Pour la méthode onload() sur un obje de type FileReader il est dit :

Citation:

onload
Called when the read operation is successfully completed.

Donc cette fonction est appelée une fois que le reader.readAsText() a été fait avec succès.
01/10/2012, 12h27
devyan

Oui elle est exécutée une fois le fichier lu mais la question était de savoir si pendant la lecture du fichier l'exécution du code s'arrête ou si tu risque de demander d'afficher "ret" alors qu'elle n'a pas encore été initialisée par [codeinline]reader.onload()[codeinline].

devyan.

Hmmmm, je vois, je ne sais pas...
En fait j'essaye de reproduire un peu ceci (exemple pour afficher des miniatures)
Bon, en fait je ne veux pas afficher de miniatures mais à la place je veux tout de même modifier le DOM. Je récupère la valeur d'un champ input avec un getElementById, je modifie ensuite cette valeur dans le onload() mais en sortant, l'élément n'a pas été modifié ! il garde son ancienne valeur...
J'ai recopié le code comme l'exemple ci dessus en modifiant ma fonction mais lorsque j'envoie mon formulaire, l'input n'a pas été changé...
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function verif_file() { var fileInput = document.querySelector('#fichier'); var reader = new FileReader(); reader.onload = (function() { return function(e) { document.getElementById('input1').value = e.target.result ; }; })(f); var f=fileInput.files[0] ; reader.readAsText(f); return true ; }
Mon element input1 a comme valeur "toto" au départ dans mon DOM au chargement de la page.
Lors du clic sur le bouton de soumission lors du choix du fichier, la fonction onload() devrait le modifier pour lui faire prendre la valeur contenue dans le fichier ("titi") : mais une fois mon formulaire soumis et que je récupère mes paramètres, j'ai toujours "toto" comme valeur et pas "titi" !
Alors que si je vais un alert(e.target.result) dans mon onload(), je vois effectivement "titi" : j'en conclus que tout se passe correctement dans la fonction mais en sortant de la fonction, c'est comme si rien ne s'était passé.
Là, j'ai pourtant repris l'exemple tel quel en l'adaptant à mes besoins...

01/10/2012, 13h52
thelvin

Ça s'appelle de la programmation asynchrone.

En résumé, cette fonction onload n'est pas là pour faire joli.
Elle est appelée quand le fichier a été correctement chargé.

Ce qui signifie, évidemment, que tout le reste se fait à un autre moment que quand le fichier a été chargé.
readAsText() lance la lecture du fichier, mais il n'attend pas que ce soit fini. Ce n'est pas son problème. L'exécution continue, et à ce moment-là la lecture du fichier a tout juste commencé depuis quelques nanosecondes. onload n'a donc pas été appelé et tout ce qui va être fait par onload n'est pas encore fait.

La raison en est simple : supposons que le fichier soit sur un réseau ou fasse plusieurs mégas. Le lire prend alors plusieurs secondes. Le JavaScript ne peut pas se permettre de durer plusieurs secondes d'exécution, cela bloquerait complètement la page.
Alors à la place, le travail se fait en arrière-plan, et une fonction JavaScript est appelée quand il est fini.
01/10/2012, 15h07
fabrice91

Merci de ta réponse.
En mettant en route firebug pendant l'exécution et en ouvrant la fenetre de debug sur la ligne qui contient mon input avec la value toto d'origine, je vois bien en direct que le DOM est modifié ! le value='toto' deviens bien value='titi' !
Je ne comprends alors pas pourquoi le formulaire envoie toto et pas titi...
01/10/2012, 15h31
fabrice91

Bon alors en fait j'ai ajouté une boucle dans la fonction principale, avant mon return, qui teste la valeur de reader.readyState et qui ne rend pas la main tant qu'elle n'est pas à 2, indiquant que la lecture est complète.
Et là, mon formulaire envoie bien la bonne valeur !
Je vais ajouter quelques controles pour rendre la main au bout d'un certain temps si rien ne se passe !
Comme c'est pour une appli en réseau local, cela va assez vite. Mais s'il y a d'autres solutions, je suis preneur.
Merci.
01/10/2012, 15h32
devyan

Re-bonjour,

C'est parce que lorsque tu utilises le mode débug tu laisses le temps au chargement du fichier de se faire.

Comme ton événement onload() est déclenché en parallèle (en asynchrone) il peut continuer à se faire alors que tu as un point d'arret sur le processus principal.
01/10/2012, 16h53
thelvin

Citation:

Envoyé par fabrice91

Mais s'il y a d'autres solutions, je suis preneur.

Une autre solution, ça je ne sais pas. Question difficile. Humm, par exemple, faire faire le travail par la fonction onload ? Celle qui existe précisément pour ça ?
05/10/2012, 13h38
thor76160

bonjour. pourrais-tu afficher ton code stp ? cette discussion m'intéresse beaucoup !

merci :)

Bonjour,

Concrètement tu ne peux pas utiliser "verif_file()" comme une focntion qu retourne true|false pour poursuivre ton traitement.

il faut l'utiliser pour exécuter ton code dans une "callback" qui sera comme l'indique thelvin appelée dans reader.onload().

AU lieu de quelque chose comme ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function verif_file() { ... return reader.result; } ... if (verif_file == ???) { // cas fichier OK } else { // cas fichier KO }
tu aurais :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 function verif_file(callbackFunc) { var fileInput = document.querySelector('#fichier'); var reader = new FileReader(); reader.onload = function() { if (typeof callbackFunc == "fucntion") { callbackFunc(reader.result); } }; reader.readAsText(fileInput.files[0]); } ... verif_file(function (resultat) { if (resuiltat == ???) { // cas fichier OK } else { // cas fichier KO } });
Il faut bien comprendre que le chargement du fichier se fait (comme l'a déjà expliqué thelvin) en parallèle du code de "démarrage" de l'action.

devyan.

si je puis me permettre, j'ai utilisé ta méthode comme tu peux le voir. cependant, ma collection d'objet "fileCollection" est désespérément vide :/.
que puis-je faire ?

Merci :)

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
var fileCollection = [];
 
               /* 
		* Public
		* Get file information from the input field
		*/
		this.GetFileFromInput = function() {
			console.log('public method UploadData:GetFileFromInput() called!');
 
			var files = elem[0].files,
				Id = undefined;
 
			$.each(files, function(index, file) {
				var ifFileExists = FileExists(file);
				var isSizeOk = ((settings.fileSizeLimit === undefined) || (file.size <= (settings.fileSizeLimit * 1000)));
				var isFileLimitOk = ((settings.fileLimit === undefined) || (fileCollection.length < settings.fileLimit));
				if(!ifFileExists && isSizeOk && isFileLimitOk)
				{
					obj.FileReader(file, function(datafile) {
						RecordFileData(file, datafile);
					});
				}
			});
 
			alert(JSON.stringify(fileCollection));
		};
 
		/* 
		* Public
		* Get file data
		*/
		this.FileReader = function(file, callbackFunc) {
			console.log('private method UploadData:FileReader() called!');
 
			var fileReader = new FileReader();
 
			fileReader.onload = function() {
				if (typeof callbackFunc == "function") {
					callbackFunc(fileReader.result); 
				}
			};
 
			fileReader.readAsDataURL(file);
		};
 
		/* 
		* Private
		* Record many information about file (Id, rate, value, isInQueue)
		*/
		var RecordFileData = function(file, datafile) {
			console.log('private method UploadData:RecordFileData() called!');
 
			file.Id = CreateGuid();
			file.rate = 0;
			file.value = datafile;
			fileCollection.push(file);
			obj.SetIsInQueue(file, false);
		};

Ah mais lol, l'astuce bidon que je viens de trouver !!!

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
this.GetFileFromInput = function() {
			console.log('public method UploadData:GetFileFromInput() called!');
 
			var files = elem[0].files,
				Id = undefined;
 
			$.each(files, function(index, file) {
				var ifFileExists = FileExists(file);
				var isSizeOk = ((settings.fileSizeLimit === undefined) || (file.size <= (settings.fileSizeLimit * 1000)));
				var isFileLimitOk = ((settings.fileLimit === undefined) || (fileCollection.length < settings.fileLimit));
				if(!ifFileExists && isSizeOk && isFileLimitOk)
				{
					obj.FileReader(file, function(datafile) {
						RecordFileData(file, datafile);
					});
				}
			});
 
			setTimeout(function(){
				alert(JSON.stringify(fileCollection));
			}, 0);
		};

un settimeout de .... 0 seconde !! 8O:ccool::mrgreen::mouarf:

EDIT :

J'ai rien dis, le problème est le même pour le retour du settimeout :/

06/10/2012, 00h21
thelvin

En quelle langue faut-il vous dire à tous les deux que les résultats ne seront visibles que quand le callback sera terminé ?

"Ben, du coup, comment est-ce qu'on attend la fin du callback ?"
=> J'en sais rien, on programme ce qu'on veut faire à la fin du callback, par exemple ? C'est-à-dire, de l'autre côté du callback que le début du callback ?