Hello Devs,

In this tutorial, we are going to learn how to upload file in angular 10. 

We will see example of angular 10 reactive form file upload. 

Follow this step by step guide given below:




Create New App

ng new my-new-app



Import Module

src/app/app.module.ts

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

import { NgModule } from '@angular/core';

import { HttpClientModule } from '@angular/common/http';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

   

import { AppComponent } from './app.component';

   

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    HttpClientModule,

    FormsModule,

    ReactiveFormsModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }



Updated View File

src/app/app.component.html

<h1>Angular 10 File Upload Tutorial Example - Rathorji.in</h1>

       

<form [formGroup]="myForm" (ngSubmit)="submit()">

  

    <div class="form-group">

        <label for="name">Name</label>

        <input 

            formControlName="name"

            id="name" 

            type="text" 

            class="form-control">

        <div *ngIf="f.name.touched && f.name.invalid" class="alert alert-danger">

            <div *ngIf="f.name.errors.required">Name is required.</div>

            <div *ngIf="f.name.errors.minlength">Name should be 3 character.</div>

        </div>

    </div>

      

    <div class="form-group">

        <label for="file">File</label>

        <input 

            formControlName="file"

            id="file" 

            type="file" 

            class="form-control"

            (change)="onFileChange($event)">

        <div *ngIf="f.file.touched && f.file.invalid" class="alert alert-danger">

            <div *ngIf="f.file.errors.required">File is required.</div>

        </div>

    </div>

          

    <button class="btn btn-primary" type="submit">Submit</button>

</form>



Use Component ts File

src/app/app.component.ts

import { Component } from '@angular/core';

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

import { FormGroup, FormControl, Validators} from '@angular/forms';

      

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

   myForm = new FormGroup({

    name: new FormControl('', [Validators.required, Validators.minLength(3)]),

    file: new FormControl('', [Validators.required]),

    fileSource: new FormControl('', [Validators.required])

  });

    

  constructor(private http: HttpClient) { }

      

  get f(){

    return this.myForm.controls;

  }

     

  onFileChange(event) {

  

    if (event.target.files.length > 0) {

      const file = event.target.files[0];

      this.myForm.patchValue({

        fileSource: file

      });

    }

  }

     

  submit(){

    const formData = new FormData();

    formData.append('file', this.myForm.get('fileSource').value);

   

    this.http.post('http://localhost:8001/upload.php', formData)

      .subscribe(res => {

        console.log(res);

        alert('Uploaded Successfully.');

      })

  }

}


upload.php

<?php

  

    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);

   

?>


Run this command:

ng serve

php -S localhost:8001


I hope this example helps you.