23-3 Service UploadService

Vous commencez à connaitre la chanson, pour l'envoi du fichier, on utilisera un service!

En effet, venons séparer la logique de composant de la logique d'envoi de fichiers. De plus, un service d'envoi de fichiers a beaucoup de sens dans le contexte puisqu'il pourra être réutilisé dans d'autres composantes.

Créer le service UploadService

1. Créer le service via Angular CLI

ng g service core/services/upload-service

2. Créer une fonction upload acceptant un fichier en paramètre

src/app/core/services/upload-service.ts

export class UploadService {

  constructor() { }
  
  async upload(file: File) {
      
  }
}

Préparer la requête

Pour préparer la requête, si on se souvient de ce qui a été fait en Postman, il s'agit de d'assigner les données via un objet FormData et de faire une requête POST pour envoyer les données.

1. Créer un une instance de FormData et ajoutez le fichier à uploader aux données du FormData via l'attribut image attendu.

src/app/core/services/upload-service.ts

async upload(file: File) {
  const formData = new FormData();
  formData.append('image', file);
}

2. Faire la requête POST avec comme body l'objet formData

src/app/core/services/upload-service.ts

async upload(file: File) {
  const formData = new FormData();
  formData.append('image', file);

  const result = await stockageApi.post('', formData);
}

info

La requête est effectuée au chemin '', c'est-à-dire la racine de l'API défini par l'URL de base (https://fichiers.bentremblay.dev/images).

Type de retour

Qu'allons-nous retourner comme type de retour? Une Promise évidemment, mais de quel type?

Il sera nécessaire de créer un nouveau type de données représentant le retour, soit:

url: string;
size: number;
type: string;
filename: string;

Pour ce cas de figure, je vous invite à créer un modèle ReponseUpload.

1. Créer l'interface ResponseUpload sous le dossier models

   ng g interface core/models/upload-reponse

2. Définissez les différentes propriétés
   src/app/core/models/upload-reponse.ts

   export interface UploadReponse {
     url: string;
     size: number;
     type: string;
     filename: string;
   }

3. Typez le retour de la requête POST pour retourner la réponse du service sous forme de ReponseUpload
   src/app/core/services/upload-service.ts

   async upload(file: File): Promise<UploadReponse> {
     const formData = new FormData();
     formData.append('image', file);
   
     const result = await stockageApi.post<UploadReponse>('', formData);
   
     return result.data;
   }