Image Upload in Angular 16

Image upload in angular 16 projects; Throughout this tutorial, you will learn how to upload images in a database using the HttpClient module & web rest API with angular 16 projects.

Angular 16 Image Upload Example Tutorial

Steps to upload image in the database with angular 16 using HttpClient module & web rest apis:

Step 1: Set up a new Angular project
Step 2: Create the Image Upload Component
Step 3: Design the Image Upload Form
Step 4: Implement Image Upload Logic
Step 5: Style the Image Upload Component (Optional)
Step 6: Add the Image Upload Component to the App Module
Step 7: Run the Application

Step 1: Set up a new Angular project

First of all, open your command prompt or cmd and execute the following command into it to install and create a new one using Angular CLI:

ng new image-upload-app
cd image-upload-app

Step 2: Create the Image Upload Component

Next, open again your command prompt or cmd to create a new component to handle image uploading:

ng generate component image-upload

Step 3: Design the Image Upload Form

Once you have created a new component named image-upload by using the above-given command, Now you need to open the image-upload.component.html file and add the following code:

<div>
  <h2>Image Upload in Angular 16</h2>
  <input type="file" (change)="onFileSelected($event)" accept="image/*">
  <button (click)="uploadImage()">Upload</button>
</div>

Step 4: Implement Image Upload Logic

Next, you need to implement image upload logic. So, Open the image-upload.component.ts file and add the following code:

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

@Component({
  selector: 'app-image-upload',
  templateUrl: './image-upload.component.html',
  styleUrls: ['./image-upload.component.css']
})
export class ImageUploadComponent {
  selectedFile: File | null = null;

  constructor(private http: HttpClient) { }

  onFileSelected(event: any): void {
    this.selectedFile = event.target.files[0];
  }

  uploadImage(): void {
    if (!this.selectedFile) {
      alert('Please select an image.');
      return;
    }

    const formData: FormData = new FormData();
    formData.append('image', this.selectedFile);

    // Replace 'YOUR_BACKEND_API_URL' with your actual backend API URL
    const backendUrl = 'YOUR_BACKEND_API_URL';

    this.http.post<any>(backendUrl, formData).subscribe(
      (response) => {
        alert('Image uploaded successfully!');
        // Handle the response from the server if needed
      },
      (error) => {
        alert('Image upload failed. Please try again later.');
        console.error(error);
      }
    );
  }
}

Step 5: Style the Image Upload Component (Optional)

You can style the image-upload.component.css file as per your application’s design to make it more visually appealing.

Step 6: Add the Image Upload Component to the App Module

Next, you need to import image upload component in app.module.ts file.

So, Open the app.module.ts file and add the ImageUploadComponent to the declarations array:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ImageUploadComponent } from './image-upload/image-upload.component';
import { HttpClientModule } from '@angular/common/http';

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

Step 7: Run the Application

Finally, you can run your application using Angular CLI:

ng serve

Visit http://localhost:4200 in your web browser to see the application running. Now you should have a functional image upload feature in your Angular application!

Conclusion

In this tutorial, you learned how to implement image uploading in an Angular application using Angular’s HttpClient module.

Subscribe to Blog via Email