Angular 8 File Upload Tutorial Example

Angular 8 File Upload Tutorial Example

In this post we will give you information about Angular 8 File Upload Tutorial Example. Hear we will give you detail about Angular 8 File Upload Tutorial ExampleAnd how to use it also give you demo for it if it is necessary.

In this tutorial, we will lean how to file upload in angular 8 application. i will give you simple example of angular file upload with reactive form. you can easily understand angular 8 file uploading example step by step.

In this example, i want to share with you how to file upload with form data in angular 8. we will see example of angular 8 reactive form file upload. we will use reactive form with file upload in angular 8 step by step. i also created api for store file in folder using php for angular 8 file upload.

Here, we will simple create reactive form using formGroup. input file onchange event we will add file to another formgroup element. then after click on submit button we will call web api for store that file to server.

I written step by step file uploading with angular 8 application, also created web services using php. so let’s follow bellowing step and get preview like as bellow:

Step 1: Create New App

You can easily create your angular app using bellow command:

ng new my-new-app


Step 2: Import Module

In this step, we need to import HttpClientModule, FormsModule and ReactiveFormsModule to app.module.ts file. so let’s import it as like bellow:

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


Also see:How to Set Style Dynamically in Angular 8?

Step 3: Updated View File

Now here, we will updated our html file. we will create simple reactive form with input file element.

In this file i used bootstrap 4 class, if you want to use bootstrap then you can follow this link: Install Bootstrap 4 in Angular 8

so let’s put bellow code:

src/app/app.component.html

<h1>Angular 8 File Upload Tutorial Example - ItSolutionStuff.com</h1>



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



    <div >

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

        <input 

            formControlName="name"

            id="name" 

            type="text" 

            >

        <div *ngIf="f.name.touched && f.name.invalid" >

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

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

        <input 

            formControlName="file"

            id="file" 

            type="file" 



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

        <div *ngIf="f.file.touched && f.file.invalid" >

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

        </div>

    </div>



    <button  type="submit">Submit</button>

</form>


Step 4: Use Component ts File

Now we need to update our component.ts file with formGroup and formControl element.

i used my local api file url ‘http://localhost:8001/upload.php’, you can use your api there.

so, let’s update as like bellow:

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

      })

  }

}


Now we are ready to run our example, we will create api file using php. so you can create update.php file with “upload” folder and run with different port and call it. so let’s create upload.php file as like bellow:

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



?>


Now we are ready to run both:

Run Angular App:

ng serve


Run PHP API:

Also see:Angular 8 Multiple Image Upload with Preview
php -S localhost:8001


Now you can run and check it.

I hope it can help you…

Hope this code and post will helped you for implement Angular 8 File Upload Tutorial Example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

7  +  3  =  

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US