Angular 17 Image Upload with Preview example

Let me explain it briefly.

– We import necessary library in app.config.ts.
– file-upload.service provides methods to save File and get Files from Rest Apis Server.
– image-upload.component contains image upload form, preview, display list of images.
– app.component is the container that we embed all components.
– index.html / or angular.json for importing the Bootstrap library

Set up HttpClient Module

Open app.config.ts and import provideHttpClient from Angular Http Module:

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient()
  ]
};

Add Bootstrap to the project

Open index.html and add following line into <head> tag:

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" />
  </head>
  ...
</html>

Another way is installing Bootstrap module with command: npm install [email protected].
Then add following code into angular.json:

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
],
"scripts": [
  "node_modules/jquery/dist/jquery.slim.min.js",
  "node_modules/popper.js/dist/umd/popper.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

Create Angular 17 Service for Upload Files

This service will use Angular HttpClient to send HTTP requests.
There are 2 functions:

upload(file): returns Observable<HttpEvent<any>> that we’re gonna use in Image Upload Component
getFiles(): returns a list of Files’ information as Observable object

services/file-upload.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpRequest, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class FileUploadService {
  private baseUrl = 'http://localhost:8080';

  constructor(private http: HttpClient) {}

  upload(file: File): Observable<HttpEvent<any>> {
    const formData: FormData = new FormData();

    formData.append('file', file);

    const req = new HttpRequest('POST', `${this.baseUrl}/upload`, formData, {
      responseType: 'json'
    });

    return this.http.request(req);
  }

  getFiles(): Observable<any> {
    return this.http.get(`${this.baseUrl}/files`);
  }
}

– FormData is a data structure that can be used to store key-value pairs. We use it to build an object which corresponds to an HTML form with append() method.

– We call the request(PostRequest) & get() method of HttpClient to send an HTTP POST & Get request to the File Upload Rest API server.

Create Angular 17 Component for Image Upload

Let’s create Image Upload UI with Preview, Card, Button and Message.

First we need to use the following imports:

image-upload.component.ts

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { FileUploadService } from '../../services/file-upload.service';

@Component({
  selector: 'app-image-upload',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './image-upload.component.html',
  styleUrl: './image-upload.component.css',
})
export class ImageUploadComponent implements OnInit { ... }

Then we define the some variables and inject FileUploadService as follows:

export class ImageUploadComponent implements OnInit {
  currentFile?: File;
  message = '';
  preview = '';

  imageInfos?: Observable<any>;

  constructor(private uploadService: FileUploadService) {}
}

Next we define selectFiles() method. It helps us to get the selected Image that we’re gonna upload.

selectFile(event: any): void {
  this.message = '';
  this.preview = '';
  const selectedFiles = event.target.files;

  if (selectedFiles) {
    const file: File | null = selectedFiles.item(0);

    if (file) {
      this.preview = '';
      this.currentFile = file;

      const reader = new FileReader();

      reader.onload = (e: any) => {
        console.log(e.target.result);
        this.preview = e.target.result;
      };

      reader.readAsDataURL(this.currentFile);
    }
  }
}

Firstly, we use selectedFiles array for accessing current selected Files and get the first item for current file only.

We use FileReader with readAsDataURL() method to get the image preview URL and reader.onload() to put it into preview variable.

The readAsDataURL() method produces data as a data: URL representing the file’s data as a base64 encoded string. The URL life is tied to the document in the window on which it was created.

Now we define upload() method for uploading the selected image:

upload(): void {
  if (this.currentFile) {
    this.uploadService.upload(this.currentFile).subscribe({
      next: (event: any) => {
        if (event instanceof HttpResponse) {
          this.message = event.body.message;
          this.imageInfos = this.uploadService.getFiles();
        }
      },
      error: (err: any) => {
        console.log(err);

        if (err.error && err.error.message) {
          this.message = err.error.message;
        } else {
          this.message = 'Could not upload the image!';
        }
      },
      complete: () => {
        this.currentFile = undefined;
      }
    });
  }
}

If the transmission is done, the event will be a HttpResponse object. At this time, we call uploadService.getFiles() to get the files’ information and assign the result to imageInfos variable.

We also need to do this work in ngOnInit() method:

ngOnInit(): void {
  this.imageInfos = this.uploadService.getFiles();
}

Now we create the HTML template of the Image Upload with Preview UI.
Add the following content to image-upload.component.html file:

<div class="row">
  <div class="col-8">
    <label class="btn btn-default p-0">
      <input type="file" accept="image/*" (change)="selectFile($event)" />
    </label>
  </div>

  <div class="col-4">
    <button
      class="btn btn-success btn-sm float-right"
      [disabled]="!currentFile"
      (click)="upload()"
    >
      Upload
    </button>
  </div>
</div>

<div>
  <img [src]="preview" class="preview" />
</div>

@if (message) {
<div class="alert alert-secondary" role="alert">
  {{ message }}
</div>
}

<div class="card">
  <div class="card-header">List of Images</div>
  <ul class="list-group list-group-flush">
    @for (image of imageInfos | async; track image.name) {
    <li class="list-group-item">
      <p><a href="{{ image.url }}">{{ image.name }}</a></p>
      <img src="{{ image.url }}" alt="{{ image.name }}" height="80px" />
    </li>
    }
  </ul>
</div>

upload-images.component.css

.preview {
  max-width: 200px;
}

Add Image Upload Component to App Component

Import ImageUploadComponent in app.component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { ImageUploadComponent } from './components/image-upload/image-upload.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, ImageUploadComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'Angular 17 Image Upload with Preview';
}

Open app.component.html and embed the Image Upload Component with <app-file-upload> tag.

<div class="container" style="width:500px">
  <div class="my-3">
    <h3>bezkoder.com</h3>
    <h4>{{ title }}</h4>
  </div>

  <app-image-upload></app-image-upload>
</div>

Run the App

If you use one of following server:
– Node.js Express File Upload Rest API example
– Node.js Express File Upload to MongoDB example
– Node.js Express File Upload to Google Cloud Storage example
– Spring Boot Multipart File upload (to static folder) example

You need run with port 8081 for CORS origin http://localhost:8081 with command:
ng serve --port 8081

Open Browser with url http://localhost:8081/ and check the result.

Or run on Stackblitz:

Source code

The source code for the Angular 17 Client is uploaded to Github.

For multiple Images upload, please visit:
Angular 17 Multiple Image Upload with Preview example

Conclusion

Today we’re learned how to build an example for Image upload with preview using Angular 17 and Bootstrap 4. We also provide the ability to show list of images.

Methods	Urls	Actions
POST	/upload	upload a File
GET	/files	get List of Files (name & url)
GET	/files/[filename]	download a File

Overview

Technology

Rest API for Image Upload & Storage

Setup Angular 17 Image Upload Preview Project