Angular 12 Image/File Upload Example

Angular 12 image/file upload example. In this tutorial, i will guide you in detail on how to upload image/file in angular 12 app using php on assets folder.

For storing a image/file in angular 12 app; i will use PHP server to upload image/file into database and directory.

PHP allows you to upload single and multiple files through few lines of code only. PHP file upload features allows you to upload binary and text files both. Moreover, you can have the full control over the file to be uploaded through PHP authentication and file operation functions.

How to Upload Image/File In Angular 12

  • Step 1 – Create New Angular App
  • Step 2 – Import Module
  • Step 3 – Add Code on View File
  • Step 4 – Import Component app.component.ts
  • Step 5 – Create Upload.php File
  • Step 6 – Start Angular App And PHP Server

Step 1 – Create New Angular App

Execute the following command on it to install angular app:

ng new my-new-app

Step 2 – Import Module

Open app.module.ts file and import HttpClientModule, FormsModule and ReactiveFormsModule to app.module.ts file like following:

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 { }

Step 3 – Add Code on View File

Create simple reactive form with input file element and image tag. So, visit src/app/app.component.html and update the following code into it:

<h1>Angular 12 Image/File Upload Tutorial Example - LARATUTORIALS.com</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>

Step 4 – Import Component app.component.ts

Go to src/app directory and open app.component.ts. Then add the following code like formGroup and formControl element on component.ts file:

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.');
      })
  }
}

Step 5 – Create Upload.php File

Create upload.php file and update following code into it:

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

   

?>

Note that, the upload.php file code will help you to upload image/file on server from angular 12 app.

Step 6 – Start Angular App And PHP Server

Execute the following commands on terminal to start angular app and as well as php server:

ng serve

php -S localhost:8001

Leave a Comment