File Upload Tutorial in Angular 16

File uploads are an important part of many web applications. In this tutorial, we will learn how to upload files in an Angular 16 application.

1. Install the Angular CLI

The first step is to install the Angular CLI. This is a command line interface that will help us create and manage our Angular application. To install the CLI, open a terminal window and run the following command:

npm install -g @angular/cli

2. Create a New Angular Project

Once the CLI is installed, we can create a new Angular project. To do this, run the following command in the terminal window:

ng new my-app

This will create a new project called “my-app” in the current directory.

3. Install the File Upload Library

Next, we need to install a library that will help us upload files. For this tutorial, we will use the ng2-file-upload library. To install it, run the following command in the terminal window:

npm install ng2-file-upload –save

4. Add the File Upload Component

Now that we have the library installed, we can add the file upload component to our application. To do this, open the src/app/app.module.ts file and add the following code:

import { FileUploadModule } from ‘ng2-file-upload’;

@NgModule({
imports: [
FileUploadModule
]
})
export class AppModule { }

5. Create the File Upload Form

Next, we need to create the file upload form. To do this, open the src/app/app.component.html file and add the following code:

Upload

6. Create the File Upload Service

Now that we have the form created, we need to create a service that will handle the file upload. To do this, create a new file called src/app/file-upload.service.ts and add the following code:

import { Injectable } from ‘@angular/core’;
import { FileUploader } from ‘ng2-file-upload’;

@Injectable({
providedIn: ‘root’
})
export class FileUploadService {
public uploader: FileUploader = new FileUploader({
url: ‘http://example.com/upload’
});
}

7. Add the Service to the Component

Now that we have the service created, we need to add it to the component. To do this, open the src/app/app.component.ts file and add the following code:

import { FileUploadService } from ‘./file-upload.service’;

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
constructor(private fileUploadService: FileUploadService) { }
}

8. Add the Uploader to the Template

Finally, we need to add the uploader to the template. To do this, open the src/app/app.component.html file and add the following code:

Upload

And that’s it! We have now successfully created a file upload form in an Angular 16 application.

ng new file-upload-tutorial
cd file-upload-tutorial

ng generate component file-upload

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

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

  constructor(private http: HttpClient) {}

  onFileSelected(event: Event): void {
    const inputElement = event.target as HTMLInputElement;
    if (inputElement.files && inputElement.files.length) {
      this.selectedFile = inputElement.files[0];
      this.previewFile();
    }
  }

  private previewFile(): void {
    const reader = new FileReader();
    reader.onload = (e) => {
      this.filePreview = e.target?.result;
    };
    reader.readAsDataURL(this.selectedFile as Blob);
  }

  uploadFile(): void {
    if (!this.selectedFile) {
      return;
    }

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

    // Replace 'http://localhost:5000/upload' with your server's endpoint for file upload
    const uploadUrl = 'http://localhost:5000/upload';

    this.http.post(uploadUrl, formData).subscribe(
      (response: any) => {
        console.log('Upload successful:', response);
        // Implement any further actions or notifications for successful upload
      },
      (error) => {
        console.error('Upload error:', error);
        // Implement any error handling or notifications for failed upload
      }
    );
  }
}

<div>
  <input type="file" (change)="onFileSelected($event)" accept=".jpg, .jpeg, .png">
  <br>
  <div *ngIf="filePreview">
    <img [src]="filePreview" alt="Selected File Preview" style="max-width: 300px;">
  </div>
  <br>
  <button (click)="uploadFile()" [disabled]="!selectedFile">Upload File</button>
</div>

<div style="text-align: center;">
  <h1>Angular 16 File Upload Tutorial - Tutsmake.com</h1>
  <app-file-upload></app-file-upload>
</div>

ng serve