Discussion :

[fabrice91]

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 :

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

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 !

[devyan]

Bonjour,

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

Code :

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

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

[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 :

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.

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

[fabrice91]

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 :

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

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

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

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

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

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

[thelvin]

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 ?

[thor76160]

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

merci

[devyan]

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 :

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

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 :

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

[thor76160]

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 :

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
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);
		};

[thor76160]

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

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

EDIT :

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

[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 ?