Angular Image Upload Example (2024)

In this tutorial, we'll show you how to upload image using Angular 8 + Spring Boot with following rest endpoints.

1. POST method to Upload image using MultipartFile[] file as a parameter.
2. GET/image/info method with image name, provide image information containing name of the image, type and image in byte format.

Create Angular Image Upload Project

1. Install NodeJS
2. Install Angular cli.

   npm install -g @angular/cli
   

3. Create a new angular project to upload image.

   ng new angular-image-upload

Project Structure

Angular Root Module

The root module of the app is defined by app.module.ts. It specifies the external modules that will be used in the application and specifies the components that belong to this module, such as the HttpClientModule and FormsModule.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

AppComponent is the base component of the application. It will be the host of the new component to upload the image.

This component calls the below rest api's to upload the image and to view the image.

1. POST method to Upload image using MultipartFile[] file as a parameter.
2. GET/image/info method with image name, provide image information containing name of the image, type and image in byte format.

import { HttpClient, HttpEventType } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})

export class AppComponent {
  constructor(private httpClient: HttpClient) { }

  uploadedImage: File;
  dbImage: any;
  postResponse: any;
  successResponse: string;
  image: any;

  public onImageUpload(event) {
    this.uploadedImage = event.target.files[0];
  }


  imageUploadAction() {
    const imageFormData = new FormData();
    imageFormData.append('image', this.uploadedImage, this.uploadedImage.name);


    this.httpClient.post('http://localhost:8080/upload/image/', imageFormData, { observe: 'response' })
      .subscribe((response) => {
        if (response.status === 200) {
          this.postResponse = response;
          this.successResponse = this.postResponse.body.message;
        } else {
          this.successResponse = 'Image not uploaded due to some error!';
        }
      }
      );
    }

  viewImage() {
    this.httpClient.get('http://localhost:8080/get/image/info/' + this.image)
      .subscribe(
        res => {
          this.postResponse = res;
          this.dbImage = 'data:image/jpeg;base64,' + this.postResponse.image;
        }
      );
  }
}

Create HTML form to upload image

Create HTML form app.component.html to upload image:

<div class="container">
    <h1>TechGeekNext Upload Image Example</h1>
    <br>
    <form>
        <div class="form-group">
            <input type="file" (change)="onImageUpload($event)">
            <input type="button" (click)="imageUploadAction()" value="Upload Image" class="btn1">
        </div>


        <div>
            <output *ngIf=successResponse class="success"><b>{{successResponse}}</b></output>
        </div>
        <br>

        <div class="form-group">
            <input type="text" id="image" placeholder="Search Image" [(ngModel)]="image" name="image" />
            <input type="button" (click)="viewImage()" value="View Image" class="btn1">

        </div>

        <div *ngIf=dbImage>
            <img [src]="dbImage">
        </div>

    </form>
</div>

Test Angular Upload Image Example

1. Prerequisite : Start the Spring Boot Upload Image Rest Api's application required for our Angular Image Upload Example.

2. POST - Upload Image

   Choose File and click on Upload Image button to upload the image.

3. View Image

   Provide the image name in the search input field and click on View Image to view the image.

Download Source Code

The full source code for this article can be found on below.
Download it here - Angular Upload Image Example