Angular File Upload Example

In this article, I will show you how to upload file in Angular. We will see Angular file upload with an example. Now let’s start how to implement Angular File upload step by step.

We will use Angular Reactive Form for Angular File Upload and we will also create API server to store file using PHP.

Steps to implement Angular File Upload Example

Create New App

Create new angular project using the following command

ng new angular-file-upload-example

In this example I have used bootstrap styling. If you want you can use in your project to by following this guide Install Bootstrap in Angular

Update Module

Now we will import required module for Angular File upload example as shown in below snippet in app.module.ts.


import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';

  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule, ReactiveFormsModule, HttpClientModule],
  providers: [],
  bootstrap: [AppComponent],
export class AppModule {}

Update Component

Now update the component file, to generate reactive form and send files to php api.


import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
export class AppComponent {
  title = 'Angular File Upload Example';
  successMessage: string = '';
  uploadFiles: string[] = [];
  uploadForm: FormGroup;
  constructor(private http: HttpClient) {

  initForm() {
    this.uploadForm = new FormGroup({
      file: new FormControl('', [Validators.required]),
  onFileChange(event: any) {
    for (var i = 0; i <; i++) {
  save() {
    const formData = new FormData();
    for (var i = 0; i < this.uploadFiles.length; i++) {
      formData.append('file[]', this.uploadFiles[i]);
      .post('http://localhost:8000/upload.php', formData)
      .subscribe(() => {
        this.successMessage = 'Uploaded Successfully';

Here in the above snippet we are calling onFileChange() function when someone click on input file. which will open popup to upload file. and when user submit the form it will call save() method which will call api with formData as shown in above code.

Update View

We will update the view to allow user to upload file which we can send to PHP server.


 <div class="container pt-5">
  <div class="col-md-4">
    <h2>{{ title }}</h2>

    <form [formgroup]="uploadForm" (ngsubmit)="save()">
      <div class="form-group">
        <input formcontrolname="file" id="file" type="file" class="form-control" (change)="onFileChange($event)">
        <div *ngif="
            uploadForm.get('file')?.touched && uploadForm.get('file')?.invalid
          " class="alert alert-danger">
          <div class="mt-2" *ngif="
              uploadForm.get('file')?.errors &&
            File is required.

      <button class="btn btn-primary mt-4" [disabled]="uploadForm.invalid" type="submit">

Once you are done with this, you can run angular project using ng serve command.


and it will show output as shown in below image.

Angular File Upload Example

It will show the following validation error if no file selected. that’s because we have set validation in view file.

Angular File Upload Example


Now out client project is ready to upload file in Angular. Now we will setup server which will accept files and upload it somewhere.

Let’s create upload.php which will store all files to upload folder.


    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Methods: PUT, GET, POST");
    header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
    $folderPath = "upload/";
    $file_tmp = $_FILES['file']['tmp_name'];
    $file_ext = strtolower(end(explode('.',$_FILES['file']['name'])));
    $file = $folderPath . uniqid() . '.'.$file_ext;
    move_uploaded_file($file_tmp, $file);

To run php project run the following command

php -S localhost:8000

and navigate to browser and open client project and now you are ready to upload file in angular.

That’s it. I hope you like this article.