dans Programmation 101
Comment importer des images avec Angular
Même s’il y a plusieurs façons de faire qui peuvent être plus ou moins bonnes, je vous présente aujourd’hui une façon simple d’importer des images depuis une application Angular vers une API.
Stratégie
Le principe est simple. Nous avons des API protégées par un JWT. Nous voulons aussi proposer à l’utilisateur de téléverser une image, une photo de profil par exemple, et de la sauvegarder dans une base de données.
Pour y arriver, je propose dans cet article une méthode simple qui est de convertir l’image en base 64 au niveau du frontend, puis de stocker simplement cette image chiffrée dans une BD.
Conversion en Base 64
Dans un premier temps, créons le champs fichier :
|
1 2 3 |
<input *ngIf="!profilePicture" type="file" (change)="handleProfilePictureInput($event.target.files)"> |
Ici, profilePicture est une chaîne de caractères déclarée dans notre composant :
|
1 |
profilePicture: string = null; |
Puis, vous pouvez aussi voir qu’on attache une méthode à l’événement change du champ input. Notez que ça fonctionne aussi en utilisant les formulaires réactifs, suffit de souscrire à valueChanges de notre FormControl. Cette méthode est responsable d’appeler le service d’affaires pour faire la conversion vers base 64 :
|
1 2 3 4 5 |
handleProfilePictureInput(file) { this.imageService .getBase64(file[0]) .subscribe(str => this.profilePicture = str); } |
Vous pouvez aussi l’afficher en prévisualisation à l’utilisateur en utilisant l’attribut src :
|
1 |
<img class="profile-picture" [src]="profilePicture"> |
Donc, tout ce qu’il manque, c’est la conversion. Voyons en détails le code derrière la méthode getBase64() :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
getBase64(file): Observable<string> { return new Observable<string>(sub => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => { sub.next(reader.result.toString()); sub.complete(); }; reader.onerror = error => { sub.error(error); }; }) } |
Donc, on utilise ici la classe FileReader, built-in dans JavaScript. Je vous invite à consulter la documentation pour valider la compatibilité de navigateur si vous voulez l’utiliser en dehors d’Angular.
On retourne donc un observable pour que ce soit plus simplement à utiliser dans notre application. Puis, en utilisant FileReader, on récupère l’objet File passé en paramètre et on le convertit en data url.
That’s it! Après, votre image est sous forme de chaîne de caractères. Il ne vous reste qu’à utiliser les méthodes conventionnelles pour la sauvegarder directement dans la base de données comme une propriété d’un objet. Vous pourriez, par exemple, utiliser Nest pour votre backend 😉
Conclusion
Aujourd’hui, vous avez appris à convertir une image dans sa représentation en base 64. Comme je l’expliquais en introduction, il y a plusieurs méthodes pour y arriver. Vous pourriez aussi créer un POST plus traditionnel avec un objet FormData pour obtenir le fichier complet en backend et le sauvegarder sur le disque dur. Tout dépend du cas d’utilisation!
Sur ce, merci de nous lire chaque semaine et de partager nos articles dans vos LinkedIn et Facebook. Vous êtes notre gaz 😀
Cheers!
Commentaires
Laisser un commentaire