angular 10 file upload example tutorial

October 8, 2020 XpertPhp

In this article, We will inform you how to file upload example in angular 10(angular 10 file upload example tutorial). we also cover the angular file validation. So you can easily upload files using our article.

We will create a simple form using bootstrap with formGroup. after then we will upload the file on the submit button to call the web API.

We will create a new angular app using the following command.

ng new myNewApp
cd myNewApp

1 2	ng new myNewApp cd myNewApp

when you create your application at that time Angular CLI asks you Would you like to add Angular routing? (y/N). If you enter with y for Yes. then the angular router will be automatically configured.

Install bootstrap 4 in angular

After the complete created application, you can install the bootstrap using the below command.

npm install bootstrap --save

1	npm install bootstrap --save

We need to add the bootstrap CSS into the angular.json file. so first we will add that path into the angular.json file.
angular.json

"styles": [
     "node_modules/bootstrap/dist/css/bootstrap.min.css",
]

"styles": [

"node_modules/bootstrap/dist/css/bootstrap.min.css",

]

Angular 10 file upload component

src/app/app.component.ts

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
	title = 'myNewApp';
	fileSource: string;
	
	constructor(private http: HttpClient) { }

	ngOnInit(): void {

	}
  
	addForm = new FormGroup({
		document: new FormControl('', Validators.required)
	});
   
	get f(){
	  return this.addForm.controls;
	}
  
	onFileChange(event) {
		if (event.target.files.length > 0) {
		  const document = event.target.files[0];
		  this.addForm.patchValue({
			fileSource: document
		  });
		}
	}

	onSubmit(){
		 
		const formData = new FormData();
		formData.append('file',this.addForm.value);
	   
		this.http.post('http://localhost/codeigniter4_rest_api/student/upload', formData)
		  .subscribe(res => {
			console.log(res);
			alert('Uploaded Successfully.');
		  })
	}
}

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

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

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

@Component({

selector: 'app-root',

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

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

})

export class AppComponent {

title = 'myNewApp';

fileSource: string;

constructor(private http: HttpClient) { }

ngOnInit(): void {

}

addForm = new FormGroup({

document: new FormControl('', Validators.required)

});

get f(){

return this.addForm.controls;

}

onFileChange(event) {

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

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

this.addForm.patchValue({

fileSource: document

});

}

onSubmit(){

const formData = new FormData();

formData.append('file',this.addForm.value);

this.http.post('http://localhost/codeigniter4_rest_api/student/upload', formData)

.subscribe(res => {

console.log(res);

alert('Uploaded Successfully.');

})

}

src/app/app.component.html

<div class="col-md-6 container">
  <h2 class="text-center">Add Student Document</h2>
  <form [formGroup]="addForm" (ngSubmit)="onSubmit()">	
	<div class="form-group">
      <label for="document">Document:</label>
      <input formControlName="document" type="file" name="document" class="form-control" (change)="onFileChange($event)" id="document">
	  <div *ngIf="f.document.touched && f.document.invalid" class="alert alert-danger">
        <div *ngIf="f.document.errors.required">Document file is required.</div>
      </div>
    </div>
    <button class="btn btn-success">Add</button>
  </form>
</div>

<h2 class="text-center">Add Student Document</h2>

<label for="document">Document:</label>

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

</div>

</form>

</div>

Angular 10 App Module

finally, we will import the module in this file. so you can see the below example.
src/app/app.module.ts

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
	FormsModule,
	ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

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

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

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

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

FormsModule,

ReactiveFormsModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Run Angular Application

Now we will run our Angular application using the below command.

ng serve

ng serve

Please follow and like us:

Install bootstrap 4 in angular

Angular 10 file upload component

Angular 10 App Module

Run Angular Application

Related posts: