Preview Image Before Upload in Angular 3

by Filip Jerga

How to make prototype upload like shooting fish in a barrel with Angular

This is the second office of the tutorial on how to upload an image to Amazon S3. Y'all can find the first part here. In this article, nosotros will take a wait at the Angular Office.

You lot can too watch my stride past step video tutorial of an image upload. The link is provided at the lesser of this article.

i. Create a template first

First, nosotros desire to create a reusable component that will be easily pluggable into other components.

Let's start with a simple HTML template for our input. Don't forget to apply styles of your choice, or you tin get them from my GitHub repo.

                <label class="image-upload-container btn btn-bwm">   <span>Select Prototype</span>   <input #imageInput          blazon="file"          accept="paradigm/*"          (alter)="processFile(imageInput)"> </label>              

Important here is a type of input, which is set to a file. The Have attribute defines accustomed files for input. Image/* specifies that we can choose images of whatsoever type past this input. #imageInput is a reference of input on which we can access uploaded files.

A Change event is fired when we select a file. Then let's take a look at the class lawmaking.

two. Don't forget for Component Code

                class ImageSnippet {   constructor(public src: string, public file: File) {} }  @Component({   selector: 'bwm-image-upload',   templateUrl: 'paradigm-upload.component.html',   styleUrls: ['paradigm-upload.component.scss'] }) export class ImageUploadComponent {    selectedFile: ImageSnippet;    constructor(private imageService: ImageService){}    processFile(imageInput: whatsoever) {     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);   } }              

Let's break down this lawmaking. You tin can see in the processFile that we are getting an paradigm input we sent from the change issue. By writing imageInput.files[0] nosotros are accessing the first file. We need a reader in order to admission boosted properties of a file. By calling readAsDataURL, nosotros tin get a base64 representation of an paradigm in the callback function of the addEventListener we subscribed to before.

In a callback part, nosotros are creating an case of the ImageSnippet. The first value is a base64 representation of an image we will brandish later on the screen. The 2d value is a file itself, which we will send to the server for upload to Amazon S3.

Now, nosotros only need to provide this file and send a asking through a service.

3. We demand a service also

It wouldn't be an Angular app without a service. The service volition exist the ane responsible for sending a asking to our Node server.

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

As I told you in the previous lecture, we demand to send an image equally part of the form information. We will append the epitome under the key of an image to form data (aforementioned central we configured before in Node). Finally, we just demand to send a request to the server with formData in a payload.

Now we tin can gloat. That's it! Prototype sent to upload!

In the next lines, I will provide some boosted lawmaking for a meliorate user experience.

4. Boosted UX Updates

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

We added new properties to the ImageSnippet: Pending and Status. Pending tin be false or true, depending if an image is currently being uploaded. Condition is the outcome of the uploading process. Information technology can be OK or FAILED.

OnSuccess and onError are chosen after image upload and they set the status of an paradigm.

Ok, now allow's take a wait at the updated template file:

                <label class="image-upload-container btn btn-bwm">   <bridge>Select Prototype</span>   <input #imageInput          type="file"          accept="image/*"          (alter)="processFile(imageInput)"> </label>   <div *ngIf="selectedFile" grade="img-preview-container">    <div form="img-preview{{selectedFile.condition === 'fail' ? '-fault' : ''}}"        [ngStyle]="{'background-epitome': 'url('+ selectedFile.src + ')'}">   </div>    <div *ngIf="selectedFile.awaiting" class="img-loading-overlay">     <div class="img-spinning-circle"></div>   </div>    <div *ngIf="selectedFile.status === 'ok'" course="warning warning-success"> Paradigm Uploaded Succesfuly!</div>   <div *ngIf="selectedFile.status === 'fail'" class="alert alert-danger"> Prototype Upload Failed!</div> </div>              

Here we are displaying our uploaded image and errors on the screen depending on the state of an image. When the prototype is pending, we as well brandish a nice spinning image to notify the user of uploading activity.

5. Add some styling

Stylings are non the focus of this tutorial, so you tin can get all of the SCSS styles in this link.

Job done! :) That should exist it for a simple image upload. If something is not clear, make sure you watched the offset part of this tutorial commencement.

If you like this tutorial, feel free to check my full grade on Udemy — The Complete Athwart, React & Node Guide | Airbnb mode app.

Completed Project: My GitHub repository

Video Lecture: YouTube Tutorial

Thank you,

Filip

---

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people become jobs every bit developers. Get started

cadoretteupoichis.blogspot.com

Source: https://www.freecodecamp.org/news/how-to-make-image-upload-easy-with-angular-1ed14cb2773b/

Share this post