Aller au contenu principal

23-2 Boite de sélection de fichier

Ajoutons une boite de sélection de fichiers au formulaire d'édition de projet dans projet-edition.

Ajouter le input de type file​

src/app/features/projets/pages/projet-edition.ts
@Component({
  selector: 'app-projet-creer',
  imports: [
    ReactiveFormsModule,
    RouterLink
  ],
  template: `
    <div class="row">
      <div class="col-lg-6 offset-lg-3">
        <h1>{{ estModeEdition ? 'Modifier le projet' : 'Créer un nouveau projet' }}</h1>

        <form [formGroup]="projetForm" (ngSubmit)="soumettre()">
          <div class="mb-3">
            <label for="formFile" class="form-label">Sélectionnez une image</label>
            <input class="form-control" type="file" id="projetImage">
          </div>

<!-- ... -->
info

<input type="file"> permet de définir un champ de type fichier dans un formulaire.

Détecter (event) lorsqu'un fichier a été sélectionné​

Pour détecter qu'un fichier a été choisi, on doit lier l'événement change du input à une fonction.

Par exemple:

src/app/features/projets/pages/projet-edition.ts
<div class="mb-3">
  <label for="formFile" class="form-label">Sélectionnez une image</label>
  <input class="form-control" type="file" id="projetImage" (change)="upload($event)">
</div>
info
  • (change) est l'événement déclenché par la sélection d'un fichier
  • $event est le détail de l'événement qui vous sera envoyé par Angular et contenant, entre autres, le fichier.

Créer la fonction upload associée à l'événement​

Vous pouvez maintenant créer la fonction upload dans la composante afin de récupérer le détail de l'événement.

src/app/features/projets/pages/projet-edition.ts
async upload(event: Event) {
  console.log(event);
}

Si vous tentez de sélectionner une image, observez le résultat dans la console. Vous verrez que sous le détail de l'événement, il y a une propriété target (représentant le champ input) sous laquelle vous pourrez voir le fichier sélectionné et ses propriétés!

Obtenir le détail du fichier​

Pour obtenir le détail du fichier, on doit donc accéder à la propriété target de l'événement, ensuite à files qui contient la liste de fichiers et finalement à files[0], soit le premier (et seul) fichier.

src/app/features/projets/pages/projet-edition.ts
async upload(event: Event) {
  const target = event.target as HTMLInputElement;
  const files = target.files as FileList
  const file = files[0];

  // On doit maintenant l'envoyer!
}