FileReader() attendre la fin de chargement d'un fichier text

**Yu Cloud** · 26/08/2019, 11h44

Bonjour,

Dans le code ci-dessous, il y a deux fonctions : main() et file_uploaded().

Après que l'utilisateur ait choisi le ou les fichiers à charger, la fonction main() va lancer la fonction file_uploaded() pour que les données des fichiers text se retrouvent au bon format dans le tableau "tableau_data".
Ensuite, elle lance d'autres fonctions qui vont travailler à partir des données qui sont dans tableau_data.

Cependant, les données n'ont pas le temps d'être chargées dans tableau_data que les fonctions function a() et function b() sont déjà lancées. Donc forcément, il y a des erreurs qui apparaissent.

Je cherche donc un moyen d'attendre la fin du chargement du fichier text avant que les autres fonctions soient lancées.

Code HTML :

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
<html>
<head>
	<title>Lire fichier</title>	
</head>
<body>
    <form>
		<input id="dataFile" type="file" accept=".txt" multiple/></input>
    </form>
	<script>
 
                //Déclaration  des variables
                let tableau_data = [];
                let datafile;
                let n = 1;
                
                
                let input = document.querySelector('input');
                // let preview = document.querySelector('.preview');
                input.addEventListener('change', main);
                
                
                function file_uploaded(datafile){
                        //Cette fonction permetTant de charger un fichier
                        let reader = new FileReader();
                        
                        reader.onload = function(event) {
                                        let records = reader.result.split("\r\n");
                                        //mise en forme du tableau de données
                                        mise_en_forme_donnees(records,";");
                                        records.forEach(function(element) {
                                                tableau_data.push(element.split("="));
                                        });                     
                        };                              
                        reader.readAsText(datafile);    
                }
                
 
                function main() {
                        // fonction principale
                        
                        n = document.getElementById("dataFile").files.length; // récupère le nombre de document à charger
                        
                        
                        for (var i = 0; i < n; i ++){
                                datafile = document.getElementById("dataFile").files[i];
                                file_uploaded(datafile); // lance la fonction de chargement du fichier.
                                
                                function a(tableau_data);
                                function b(tableau_data);
                        }
                }
 
        </script>
</body>
 
</html>

Je vous remercie par avance pour votre aide.

Yu Cloud

**SpaceFrog** · 26/08/2019, 14h20

Un ajax sur le fichier texte ?

**psychadelic** · 26/08/2019, 14h22

normalement un événement 'loadend' est déclenché en fin de lecture, que ce soit ou non "bien passé" et que le gestionnaire en est finit sur la lecture d'un fichier

pour la suite l'utilisation des promesses peut être utile.

**Yu Cloud** · 26/08/2019, 17h27

Le fichier que je souhaite lire est sur le pc de l'utilisateur et je ne souhaite pas le charger sur le serveur pour le lire ensuite.
Donc je pense que l'AJAX n'est pas adapté à la fonction que je souhaite réaliser.

J'ai pensé à mettre .addEventListener("loadend", function a) par exemple, ce qui m'aurait permis d'attendre le chargement du fichier pour lancer la fonction mais ça aurait bien fonctionné si j'avais uniquement 1 fichier à charger. Cependant, je boucle sur plusieurs fichiers et la lecture du fichier suivant est lancée avant même que le précédent ne soit chargé !

J'ai également essayé la propriété .onloadend de FileReader() mais elle renvoie toujours null quelque soit la position où je mets le console.log pour observer l'état d'avancement du chargement du fichier.

Je ne vois pas comment récupérer l'état du chargement et faire en sorte que le programme attende la fin du chargement avant de lancer les autres fonctions.

**Loralina** · 26/08/2019, 18h34

Bonjour,
Si j'ai bien compris, par rapport au code existant, le plus simple serait d'ajouter, à la fin de la fonction reader.onload = function(event) {}, ceci :

Code :

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

1
2
3
4
if(--n===0) {
	a(tableau_data);
	b(tableau_data);
}

**Loralina** · 28/08/2019, 13h12

Envoyé par Loralina

Si j'ai bien compris

Après relecture, je me demande si j'ai bien compris : les fonctions "a" et "b" doivent être lancées après chaque fin de chargement de fichier ou bien une seule fois quand tout est fini ?
A la limite, peu importe, mes remarques donnent des pistes pour les deux cas de figure.

A noter cette variante classique qui consiste à charger les fichiers un à un : on charge le premier fichier, puis une fois chargé, on charge le deuxième et ainsi de suite.

**Yu Cloud** · 28/08/2019, 16h10

Envoyé par Loralina

Après relecture, je me demande si j'ai bien compris : les fonctions "a" et "b" doivent être lancées après chaque fin de chargement de fichier ou bien une seule fois quand tout est fini ?

Les fonctions "a" et "b" sont lancées après chaque fin de chargement.

Envoyé par Loralina

Ce serait possible avec await, mais bon, je trouve que cette fonction "main" aurait un petit aspect fourre-tout.

Envoyé par Loralina

Il n'est pas plus mal de bien séparer les tâches, plutôt que d'avoir une seule fonction "main".

Avec la fonction main, je cherche justement à bien séparer les tâches... Chaque fonction a un rôle et celui de file_uploaded() est de charger les fichiers pour pouvoir ensuite utiliser les fonctions de traitement.
Il me semble que mettre les fonctions de traitement dans le reader.onload revient à transformer file_uploaded() en fonction principale...

Dans tous les cas, il apparaît que je dois changer la structure d'exécution des fonctions soit en les intégrant dans reader.onload soit en utilisant les promesses.

**psychadelic** · 26/08/2019, 20h44

Sinon, pourquoi parler d'Ajax? quel rapport ?

**ABCIWEB** · 27/08/2019, 01h01

Envoyé par psychadelic

comme je l'ai écrit plus haut, utilise les promesses, et ici en l’occurrence il faut caser un Promise.all() englobant chacune des lectures

Je ne pense pas que cela soit nécessaire ici. A priori le code de Loralina devrait fonctionner correctement.

**psychadelic** · 27/08/2019, 03h52

oui effectivement l'idée de Loralina est la bonne, ce qui donne :

Code javascript :

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
const ihm_input    = document.querySelector('#dataFile')
var   tableau_data = []
 
ihm_input.onchange =_=>
  {
  let countFicLu = ihm_input.files.length
 
  for(let inFile of ihm_input.files)
    {
    let reader = new FileReader()
    reader.onload =_=>
      {
      let records = reader.result.split('\n')
      for(let line of records)
        {
        tableau_data.push(line.split('='))
        }
      if(!--countFicLu)
        {  
        fct_a()
        fct_b()
        }
      }
    reader.readAsText(inFile); 
    }
  }
function fct_a()
  {
  console.log( tableau_data )
  }
function fct_b()
  {
  console.log( 'fct b' )
  }

FileReader() attendre la fin de chargement d'un fichier text

JavaScript

Vue hybride

Discussions similaires

Partager

Partager