Discussion :

[comme de bien entendu]

Bonjour,
Je souhaite intégrer un tableau HTML via du JavaScript qui lit un fichier, csv mais je suis en environnemnt Boostrap V4 et ca pose probleme : le code de lecture du fichier csv refuse de se lancer.

J'ai mis un point d'arrêt dans le JavaScript avec Chrome sur

fileInput.addEventListener('submit', readFile);

j'arrive bien au code mais le readFile ne se lance pas.

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
<div class="container">
      <form class="needs-validation" novalidate>
      <h4>Vous allez pouvoir intégrer ci-dessous, via un fichier texte, les nouveaux clients de votre entreprise... </h4>
      <center><h5>Voici la liste des champs que votre fichier doit contenir</h5></center>
      <div class="form-row">
        <div class="col-xs-8">
          <table id="tableau" class="table table-striped table-hover">
            <tbody>
              <thead>
                  <tr>
                    <th>Nom</th>
                    <th>Prénom</th>
                    <th>Code Postal</th>
                    <th>Mail</th>
                    <th>Téléphone</th>
                    <th>Sexe</th>
                  </tr>
              </thead>
              <div id='Chargement_Fichier_Visible'>
              </div>
            </tbody>
        </table>
          <div class="w-40">
 
          <!-- Recuparation du fichier -->
          <div class="col-xs-8">
            <label for="NomClient"></label>
            <input type="file" style="width:80%" name="FileToUpload" class="form-control" id="FileToUpload" required>
          </div>
 
          <label for="nom">Spécifiez le séparateur</label>
          <input type="text" style="width:30%"; class="form-control" id="separator" name="separator" required>
          <div class="valid-feedback">Ok !</div>
          <div class="invalid-feedback">Valeur incorrecte</div>
 
 
          </div>
          <div class="form-row">
            <div class="col-xs-8">
            <br/>
              <button id="IntegrationFichier" type="submit" class="btn btn-success pull-right"> Valider </button>
          </div>
        </div>
        </div>
        </div>
    </form>
</div>

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
<script type="text/javascript">
 
         var fileInput = document.getElementById("IntegrationFichier"),
 
         readFile = function () {
             var reader = new FileReader();
             reader.onload = function () {
                 const ListeDonnees =reader.result;
                 var monTab = ListeDonnees.split('\n');
                 console.log(monTab[1]);
                 var tableau = document.getElementById("tableau");
                 for (var i=0;i<monTab.length;i++)
                 {
                     var ligne = tableau.insertRow(-1)
                     var UneLigneTab=monTab[i].split(',');
                     //
                     var colonne1 = ligne.insertCell(0);
                     colonne1.innerHTML += UneLigneTab[0];
                     //
                     var colonne2 = ligne.insertCell(1);
                     colonne2.innerHTML += UneLigneTab[1];
                     //
                     var colonne3 = ligne.insertCell(1);
                     colonne3.innerHTML += UneLigneTab[2];
                     //
                     var colonne4 = ligne.insertCell(1);
                     colonne4.innerHTML += UneLigneTab[3];
                     //
                     var colonne5 = ligne.insertCell(1);
                     colonne5.innerHTML += UneLigneTab[4];
 
                 }
             };
 
             reader.readAsBinaryString(fileInput.files[0]);
         };
 
         fileInput.addEventListener('submit', readFile);
 
 </script>

J'ajoute que ca marche très bien si je n'utilise pas Bootstap, quel type d'erreur ai je bien pu commettre ?

[NoSmoking]

Bonjour,

J'ajoute que ca marche très bien si je n'utilise pas Bootstap, quel type d'erreur ai je bien pu commettre ?

j'ai du mal à voir ce qui marche, tu ne lis pas les données de ton fichier, il faut gérer cela avec l'ajout d'un écouteur change sur ton <input type="file" ...>.

Pourquoi vouloir faire un envoi vers le serveur ?

[comme de bien entendu]

Bonjour, en fait j'ai un écouteur sur le bouton de validation,

Code html :

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

1
2
3
<br/>
              <button id="IntegrationFichier" type="submit" class="btn btn-success pull-right"> Valider </button>
  </div>

Mais je voulais utiliser Bootstrap pour gérer aussi la nécessité d'intégrer le séparateur et les messages d'erreur automatiques qui sont générés si il manque une information (ainsi que le changement de support, tablette, ordi, smartphone.)
Au départ j'avais intégré un formulaire mais là effectivement ce n'est plus la peine de transmettre sur la page php.

Voici la version correcte simplifiée mais qui n'apporte pas le formatage de Boostrap.

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
<html>
 
<p>Select local CSV File:</p>
<input id="csv" type="file">
 
<output id="out">
    <table id="tableau">
        <tbody>
 
        </tbody>
    </table>
</output>
<script>
var fileInput = document.getElementById("csv"),
 
    readFile = function () {
        var reader = new FileReader();
        reader.onload = function () {
            //document.getElementById('out').innerHTML = reader.result;
            const ListeDonnees =reader.result;
            var monTab = ListeDonnees.split('\n');
            console.log(monTab[1]);
            var tableau = document.getElementById("tableau");
            for (var i=0;i<monTab.length;i++)
            {
                var ligne = tableau.insertRow(-1)
                var UneLigneTab=monTab[i].split(',');
                //
                var colonne1 = ligne.insertCell(0);
                colonne1.innerHTML += UneLigneTab[0];
                //
                var colonne2 = ligne.insertCell(1);
                colonne2.innerHTML += UneLigneTab[1];
                //
                var colonne3 = ligne.insertCell(1);
                colonne3.innerHTML += UneLigneTab[2];
                //
                var colonne4 = ligne.insertCell(1);
                colonne4.innerHTML += UneLigneTab[3];
                //
                var colonne5 = ligne.insertCell(1);
                colonne5.innerHTML += UneLigneTab[4];
 
            }
        };
        //start reading the file. When it is done, calls the onload event defined above.
        reader.readAsBinaryString(fileInput.files[0]);
    };
 
fileInput.addEventListener('change', readFile);
 
</script>
</html>

Je vais essayer de revoir peut être une version plus minimaliste de mon code Boostrap (mais que je ne maitrise pas encore bien)

[NoSmoking]

Je vais essayer de revoir peut être une version plus minimaliste de mon code Boostrap (mais que je ne maitrise pas encore bien)

tel-quel ton code devrait fonctionner même avec BootStrap même si dans ton cas le CSS devrait être simple à mettre en place.

[comme de bien entendu]

Du coup, comment faire pour déclencher un évenement sur un bouton pour qu'il me permette de récupérer le nom du fichier et le séparateur en une seule fois.
(De manière à présenter le contenu du fichier)
Est ce que je peux procéder via un groupe formulaire et comment ?
Merci d'avance

[NoSmoking]

C'est une question d'organisation de ton code.

Quelque chose comme:

Code html :

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

1
2
3
4
5
6
7
<button id="btn-load">Charger</button>
<input id="file-name">
<select id="sel-separateur">
    <option value="," selected>Virgule</option>
    <option value=";">Point virgule</option>
    <option value="\t">Tabulation</option>
</select>

Tu peux simuler le clic sur l'appui du bouton

Code :

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

1
2
3
4
5
const btnLoad = document.getElementById("btn-load");
const fileName = document.getElementById("file-name");
btnLoad.addEventListener("click", () => {
  fileName.click(); // déclenche le clic sur l'input file
});

avec, comme tu l'as fait :

Code :

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

fileName.addEventListener("change", readFile);

Les fonctions s'enchaineront et il te suffit de récupérer le type de séparateur dans ta fonction de récupération.

[comme de bien entendu]

Merci bien, pour cette réponse bien documenté.
Bonne journée.