Comment rendre le téléchargement d'image facile avec Angular

Il s'agit de la deuxième partie du didacticiel sur la façon de télécharger une image sur Amazon S3. Vous pouvez trouver la première partie ici. Dans cet article, nous allons jeter un œil à la partie angulaire.

Vous pouvez également regarder mon didacticiel vidéo étape par étape d'un téléchargement d'image. Le lien est fourni au bas de cet article.

1. Créez d'abord un modèle

Tout d'abord, nous voulons créer un composant réutilisable qui sera facilement connectable à d'autres composants.

Commençons par un simple modèle HTML pour notre entrée. N'oubliez pas d'appliquer les styles de votre choix, ou vous pouvez les obtenir à partir de mon dépôt GitHub.

 Select Image  

Il est important de noter ici un type d'entrée, qui est défini sur un fichier. L' attribut Accept définit les fichiers acceptés pour l'entrée. Image / * spécifie que nous pouvons choisir des images de tout type par cette entrée. #imageInput est une référence d'entrée sur laquelle nous pouvons accéder aux fichiers téléchargés.

Un événement Change est déclenché lorsque nous sélectionnons un fichier. Jetons donc un œil au code de la classe.

2. N'oubliez pas le code du composant

class ImageSnippet { constructor(public src: string, public file: File) {} } @Component({ selector: 'bwm-image-upload', templateUrl: 'image-upload.component.html', styleUrls: ['image-upload.component.scss'] }) export class ImageUploadComponent { selectedFile: ImageSnippet; constructor(private imageService: ImageService){} processFile(imageInput: any) { const file: File = imageInput.files[0]; const reader = new FileReader(); reader.addEventListener('load', (event: any) => { this.selectedFile = new ImageSnippet(event.target.result, file); this.imageService.uploadImage(this.selectedFile.file).subscribe( (res) => { }, (err) => { }) }); reader.readAsDataURL(file); } }

Décomposons ce code. Vous pouvez voir dans le processFile quenous recevons une entrée d'image que nous avons envoyée à partir de l' événement de modification . En écrivant imageInput.files [0], nous accédons au premier fichier . Nous avons besoin d'un lecteur pour accéder aux propriétés supplémentaires d'un fichier. En appelant readAsDataURL, nous pouvons obtenir une représentation en base64 d'une image dans la fonction de rappel de l' addEventListener auquel nous nous sommes abonnés auparavant.

Dans une fonction de rappel, nous créons une instance de ImageSnippet. La première valeur est une représentation en base64 d'une image que nous afficherons plus tard à l'écran. La deuxième valeur est un fichier lui-même, que nous enverrons au serveur pour téléchargement vers Amazon S3.

Il ne nous reste plus qu'à fournir ce fichier et envoyer une requête via un service.

3. Nous avons également besoin d'un service

Ce ne serait pas une application angulaire sans service. Le service sera le seul responsable de l'envoi d'une requête à notre serveur Node.

export class ImageService { constructor(private http: Http) {} public uploadImage(image: File): Observable { const formData = new FormData(); formData.append('image', image); return this.http.post('/api/v1/image-upload', formData); } }

Comme je vous l'ai dit dans la conférence précédente, nous devons envoyer une image dans le cadre des données du formulaire . Nous ajouterons l'image sous la clé d'une image pour former des données (même clé que nous avons configurée auparavant dans Node). Enfin, il suffit d'envoyer une requête au serveur avec formData dans une charge utile.

Maintenant, nous pouvons célébrer. C'est ça! Image envoyée à télécharger!

Dans les lignes suivantes, je fournirai du code supplémentaire pour une meilleure expérience utilisateur.

4. Mises à jour UX supplémentaires

class ImageSnippet { pending: boolean = false; status: string = 'init'; constructor(public src: string, public file: File) {} } @Component({ selector: 'bwm-image-upload', templateUrl: 'image-upload.component.html', styleUrls: ['image-upload.component.scss'] }) export class ImageUploadComponent { selectedFile: ImageSnippet; constructor(private imageService: ImageService){} private onSuccess() { this.selectedFile.pending = false; this.selectedFile.status = 'ok'; } private onError() { this.selectedFile.pending = false; this.selectedFile.status = 'fail'; this.selectedFile.src = ''; } processFile(imageInput: any) { const file: File = imageInput.files[0]; const reader = new FileReader(); reader.addEventListener('load', (event: any) => { this.selectedFile = new ImageSnippet(event.target.result, file); this.selectedFile.pending = true; this.imageService.uploadImage(this.selectedFile.file).subscribe( (res) => { this.onSuccess(); }, (err) => { this.onError(); }) }); reader.readAsDataURL(file); } }

Nous avons ajouté de nouvelles propriétés à ImageSnippet: Pending and Status. En attente peut être faux ou vrai, selon qu'une image est en cours de téléchargement. Le statut est le résultat du processus de téléchargement. Cela peut être OK ou FAILED.

OnSuccess et onError sont appelés après le téléchargement d'une image et définissent l'état d'une image.

Ok, jetons maintenant un œil au fichier de modèle mis à jour:

 Select Image Image Uploaded Succesfuly! Image Upload Failed! 

Ici, nous affichons notre image téléchargée et les erreurs à l'écran en fonction de l' état d'une image . Lorsque l'image est en attente, nous affichons également une belle image tournante pour informer l'utilisateur de l'activité de téléchargement.

5. Ajoutez du style

Les styles ne sont pas au centre de ce didacticiel, vous pouvez donc obtenir tous les styles SCSS dans ce lien.

Travail terminé! :) Cela devrait être tout pour un simple téléchargement d'image. Si quelque chose n'est pas clair, assurez-vous d'avoir d'abord regardé la première partie de ce didacticiel.

Si vous aimez ce tutoriel, n'hésitez pas à consulter mon cours complet sur Udemy - The Complete Angular, React & Node Guide | Application de style Airbnb.

Projet terminé: mon référentiel GitHub

Conférence vidéo : Tutoriel YouTube

À votre santé,

Filip