Dans ce nouvel article, nous verrons comment uploader une vidéo sur un serveur tout en affichant le pourcentage d’envoi.

Étape 1:

Le fichier .component.html de notre component comportera une balise input de type file et une balise video qui affichera la vidéo choisie :

Étape 2:

a- Au niveau du fichier .component.ts de notre component, nous ferons la déclaration de deux variables à savoir videoURL et videoFile ainsi qu’un objet domSanitizer de type DomSanitizer :

b- Ensuite, nous déclarerons notre méthode onFileChange(event) :

Étape 3:

a- Nous créerons un service qui nous permettra de mettre en place notre méthode pour communiquer avec un serveur distant à travers une API afin d’uploader la vidéo :

b- Dans le constructeur de notre classe VideoService, nous importerons un objet httpClient de type HttpClient :

c- Nous créerons ensuite la méthode uploadVideo() destinée à uploader notre vidéo avec la récupération du pourcentage d’envoi du fichier sur le serveur:

• reportProgress nous permet d’indiquer à la requête que nous voulons récupérer les informations liées à la progression du fichier envoyé
• observe: "events" nous permet d’interagir avec les évènements de type HttpEventType qui nous permettrons de savoir si la requête est en cours ou finalisée.

Étape 4:

Nous créerons la méthode onAddVideo() dans le fichier .component.ts de notre component :

• La variable percentOfUploading nous permet de récupérer le pourcentage d’envoi de notre vidéo sur le serveur
• Les attributs loaded et total contenus dans la réponse de notre requête ont été rendu disponibles grâce au paramètre reportProgress: true
• Les évènements de type Response et UploadProgress ont été rendu disponibles grâce au paramètre observe qui a pour valeur events.

Voici donc en résumé ce à quoi ressemble le code global de notre component:

a- Le fichier .component.html :

b- Le fichier .component.ts :

c- Le fichier video-service.service.ts :

Enjoy coding and stayed tuned !!!