23-5 Restrictions sur les fichiers

Il est possible d'appliquer, soit automatiquement ou manuellement, certaines restrictions sur la sélection de fichiers.

Restreindre la sélection aux images seulement

Pour permettre de sélectionner des images seulement, on peut ajouter au input le paramètre accept et préciser les MIME types.

Par exemple:

<input
  class="form-control"
  accept="image/jpeg, image/jpeg, image/png"
  type="file"
  id="projetImage"
  (change)="upload($event)">

info

Dans ce cas, seulement les jpeg et png seraient acceptés.

WebStorm peut vous aider avec l'autocomplétion pour voir la liste complète des possibilités.

Vous pouvez aussi utiliser le symbole image/* afin de préciser que toutes les images sont acceptées.

<input class="form-control" type="file" id="projetImage" accept="image/*" (change)="upload($event)">

Restriction sur la taille

Pour faire des restrictions un peu plus avancées, on doit les faire manuellement en traitant l'événement.

Par exemple:

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];

  const max_size = 1024 * 1024 * 5; // 5 Mo
  if(file.size > max_size){
      // traiter la limitation
  } else {
      this.uploadReponse = await this.uploadService.upload(file);
  }
}

On pourrait par exemple avoir une propriété erreurUpload dans le composant, contrôlant une boîte alert affichant l'erreur.

src/app/features/projets/pages/projet-edition.ts

export class ProjetEdition implements OnInit {
  //...

  protected erreurUpload?: string;

  //...

src/app/features/projets/pages/projet-edition.ts

<div class="mb-3">
  @if(erreurUpload) {
    <div class="alert alert-danger">{{ erreurUpload }}</div>
  }
  <label for="formFile" class="form-label">Sélectionnez une image</label>
  <input class="form-control" type="file" id="projetImage" (change)="upload($event)">
</div>

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];

  const max_size = 1024 * 1024 * 5; // 5 Mo
  if(file.size > max_size){
    this.erreurUpload = "La taille de l'image ne doit pas dépasser 5 Mo."
  } else {
    this.uploadReponse = await this.uploadService.upload(file);
  }
}

Ce qui donnerait quelque chose comme ceci dans le cas d'une image dépassant la limite: