How to Save Uploaded File in Folder Using Angular 5

past Filip Jerga

How to brand image upload piece of cake with Athwart

This is the 2nd part of the tutorial on how to upload an image to Amazon S3. You can observe the kickoff part here. In this commodity, we will take a await at the Angular Part.

You lot tin as well watch my step by step video tutorial of an epitome upload. The link is provided at the bottom of this article.

ane. Create a template start

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

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

                <label class="image-upload-container btn btn-bwm">   <span>Select Image</span>   <input #imageInput          type="file"          take="image/*"          (change)="processFile(imageInput)"> </label>              

Important hither is a type of input, which is set to a file. The Take attribute defines accepted files for input. Image/* specifies that nosotros tin can choose images of any blazon past this input. #imageInput is a reference of input on which we can access uploaded files.

A Change consequence is fired when nosotros select a file. So let'south take a look at the grade code.

ii. Don't forget for Component Lawmaking

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

Let'south interruption down this code. You can see in the processFile that we are getting an image input nosotros sent from the change event. By writing imageInput.files[0] nosotros are accessing the kickoff file. We need a reader in social club to access additional properties of a file. By calling readAsDataURL, nosotros can get a base64 representation of an image in the callback part of the addEventListener nosotros subscribed to before.

In a callback function, we are creating an instance of the ImageSnippet. The first value is a base64 representation of an image we volition display afterward on the screen. The second value is a file itself, which nosotros will send to the server for upload to Amazon S3.

Now, we just need to provide this file and send a asking through a service.

three. Nosotros need a service as well

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

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

Every bit I told you in the previous lecture, we demand to ship an epitome as part of the class data. Nosotros will suspend the image under the primal of an image to form data (same key we configured before in Node). Finally, we just demand to send a request to the server with formData in a payload.

At present we can celebrate. That's information technology! Image sent to upload!

In the next lines, I will provide some boosted code for a better user experience.

4. Additional UX Updates

                grade ImageSnippet {   awaiting: boolean = false;   status: string = 'init';    constructor(public src: string, public file: File) {} }  @Component({   selector: 'bwm-prototype-upload',   templateUrl: 'prototype-upload.component.html',   styleUrls: ['epitome-upload.component.scss'] }) consign form ImageUploadComponent {    selectedFile: ImageSnippet;    constructor(private imageService: ImageService){}    private onSuccess() {     this.selectedFile.pending = imitation;     this.selectedFile.condition = 'ok';   }    private onError() {     this.selectedFile.awaiting = false;     this.selectedFile.status = 'neglect';     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.issue, 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 can be false or true, depending if an image is currently existence uploaded. Condition is the result of the uploading procedure. It can be OK or FAILED.

OnSuccess and onError are called after epitome upload and they prepare the status of an image.

Ok, at present allow's have a look at the updated template file:

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

Here we are displaying our uploaded image and errors on the screen depending on the state of an epitome. When the paradigm is pending, we also display a overnice spinning image to notify the user of uploading activity.

five. Add some styling

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

Chore done! :) That should be it for a simple image upload. If something is not clear, make sure y'all watched the first part of this tutorial kickoff.

If you lot like this tutorial, feel free to check my full course on Udemy — The Consummate Angular, React & Node Guide | Airbnb style app.

Completed Project: My GitHub repository

Video Lecture: YouTube Tutorial

Thanks,

Filip

---

Acquire to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

alcarazporms1960.blogspot.com

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

Share this post