Récupérer plusieurs champs FILE

Bonjour

Je fais du symfony mais j'ai un problème javascript. En effet dans mon formulaire, j'ai 2 champs fichier(mais j'en ai au total 4). J'utilise javscript pour récupérer le nom du fichier. Pour un champ, ça marche mais au 2ème champ fichier ça bloque, pas de message d'erreurs. Voici mon code avec 2 champs :

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
 
<div class="columns">
      <div class="column">
      <p>Votre pièce d'identité(recto) <span style="color:red">*</span></p>
     <div id="carte_recto1" class="file has-name">
  <label class="file-label">
    {{ form_widget(form.cartRecto1, {
           'attr': {
           'class':  
            'file-input', 
             }
          }) 
            }}
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label">
        Choisissez le fichier…
      </span>
    </span>
    <span class="file-name">
      Pas encore de fichier
    </span>
  </label>
</div>
<small>{{ form_help(form.cartRecto1) }}</small>
<div class="form-error">
   {{ form_errors(form.cartRecto1) }}
</div>
 
 
<script>
  const fileInput = document.querySelector('#carte_recto1 input[type=file]');
  fileInput.onchange = () => {
    if (fileInput.files.length > 0) {
      const fileName = document.querySelector('#carte_recto1 .file-name');
      fileName.textContent = fileInput.files[0].souscripteur[cartRecto1];
    }
  }
</script>
      </div> {# div de la column #}
 
 
      <div class="column">
      <p>Votre pièce d'identité(verso) <span style="color:red">*</span></p>
     <div id="carte_recto1" class="file has-name">
  <label class="file-label">
    {{ form_widget(form.cartVerso1, {
           'attr': {
           'class':  
            'file-input', 
             }
          }) 
            }}
    <span class="file-cta">
      <span class="file-icon">
        <i class="fas fa-upload"></i>
      </span>
      <span class="file-label">
        Choisissez le fichier…
      </span>
    </span>
    <span class="file-name">
      Pas encore de fichier
    </span>
  </label>
</div>
<small>{{ form_help(form.cartVerso1) }}</small>
<div class="form-error">
   {{ form_errors(form.cartVerso1) }}
</div>
 
 
<script>
  const fileInput = document.querySelector('#carte_verso1 input[type=file]');
  fileInput.onchange = () => {
    if (fileInput.files.length > 0) {
      const fileName = document.querySelector('#carte_verso1 .file-name');
      fileName.textContent = fileInput.files[0].souscripteur[cartVerso1];
    }
  }
</script>
      </div> {# div de la column #}
 
 
           </div> {# div de la columns #}

Merci pour votre aide