Upload file in Angular 2

In this tutorial we will discuss how to upload file in Angular 2.

Here is the view of uploading file. There is an option to browse the file as you select the file fileChange function will be called which is written in FileComponent.

Create a component :

html :

<h2>Upload Files Sample</h2>
{{fileUploadMsg}}
<div class="fileUpload btn btn-primary" *ngIf="isUploadBtn">
<span>Upload</span>
<input type="file" id="btnUpload" value="Upload" (change)="fileChange($event)" class="upload" />
</div>
<style>
.fileUpload {
position: relative;
overflow: hidden;
margin: 20px;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
</style>

<h2>Upload Files Sample</h2>

<span>Upload</span>

</div>

<style>

.fileUpload {

position: relative;

overflow: hidden;

margin: 20px;

}

.fileUpload input.upload {

position: absolute;

top: 0;

right: 0;

margin: 0;

padding: 0;

font-size: 20px;

cursor: pointer;

opacity: 0;

filter: alpha(opacity=0);

}

</style>

In this component I have written fileChange function which calls the service to upload the file. But before calling the function we create the FormData object and then append the file object into FormData object. ... Read More

ng2-admin - Angular 2 Admin

Admin in angular 2 with following functionalities:

User login & logout
Consume web services
User listing
Update user profile
Pagination
Export to CSV
Export to PDF
Upload file
Delete user

Export data to CSV with headers in Angular 2

Sometime we need to export data in CSV. Here I'm going to explain how can we export the data to CSV in Angular 2 along with headers.

Data which will be exported will be received form web service on and click event.

First of all you need to install angular2-csv library by following below command.

Install:

npm install --save angular2-csv

1	npm install --save angular2-csv

Html:

<button (click)="download()">download </button>

1	<button (click)="download()">download </button>

Component:

import { Component, OnInit } from '@angular/core';
import { Angular2Csv } from 'angular2-csv/Angular2-csv';
import { UserService } from '../_services/index';

@Component({
selector: 'app-csv',
templateUrl: './csv.component.html',
styleUrls: ['./csv.component.css']
})
export class CsvComponent implements OnInit {
private allItems: {};
constructor(private userService: UserService) { }

ngOnInit() {
}

download() {
this.userService.getAll()
.subscribe(data => {
//API data
this.allItems = data.result.users;
/*var dummyData = [
{
first_name: "Saurabh",
last_name: "Sharma",
id: 147
},
{
first_name: "Gaurav",
last_name: "Sharma",
id: 9
}];
*/

var options = { 
fieldSeparator: ',',
quoteStrings: '"',
decimalseparator: '.',
showLabels: true, 
showTitle: true,
headers: ['First Name','Last Name','ID'] 
};
new Angular2Csv(this.allItems, 'My Report',options);
//new Angular2Csv(dummyData, 'My Report',options);
}); 
}

}

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

import { Angular2Csv } from 'angular2-csv/Angular2-csv';

import { UserService } from '../_services/index';

@Component({

selector: 'app-csv',

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

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

})

export class CsvComponent implements OnInit {

private allItems: {};

constructor(private userService: UserService) { }

ngOnInit() {

}

download() {

this.userService.getAll()

.subscribe(data => {

//API data

this.allItems = data.result.users;

/*var dummyData = [

{

first_name: "Saurabh",

last_name: "Sharma",

id: 147

{

first_name: "Gaurav",

last_name: "Sharma",

id: 9

}];

var options = {

fieldSeparator: ',',

quoteStrings: '"',

decimalseparator: '.',

showLabels: true,

showTitle: true,

headers: ['First Name','Last Name','ID']

};

new Angular2Csv(this.allItems, 'My Report',options);

//new Angular2Csv(dummyData, 'My Report',options);

});

}

Generate PDF in Angular 2

First of all you need to install following javascript libraries:

npm install jspdf --save
npm install @types/jspdf --save

1 2	npm install jspdf --save npm install @types/jspdf --save

Then add following in angular-cli.json:

"scripts": [ "../node_modules/jspdf/dist/jspdf.min.js" ]

1	"scripts": [ "../node_modules/jspdf/dist/jspdf.min.js" ]

Create a component

ng g component pdf

1	ng g component pdf

html:

<button (click)="download()">download </button>

1	<button (click)="download()">download </button>

component ts:

import { Component, OnInit, Inject } from '@angular/core';
import * as jsPDF from 'jspdf'
@Component({
selector:'app-pdf',
templateUrl:'./pdf.component.html',
styleUrls: ['./pdf.component.css'],
providers: [
{ provide: 'Window', useValue: window }
]
})
export class PdfComponent implements OnInit {

constructor(
@Inject('Window') private window: Window,
) { }

ngOnInit() {
}

download() {

vardoc = new jsPDF();
doc.text(20, 20, 'Hello world!');
doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
doc.addPage();
doc.text(20, 20, 'http://www.coding4developers.com/');

// Save the PDF
doc.save('Test.pdf');
}

}

import { Component, OnInit, Inject } from '@angular/core';

import * as jsPDF from 'jspdf'

@Component({

selector:'app-pdf',

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

styleUrls: ['./pdf.component.css'],

providers: [

{ provide: 'Window', useValue: window }

]

})

export class PdfComponent implements OnInit {

constructor(

@Inject('Window') private window: Window,

) { }

ngOnInit() {

}

download() {

vardoc = new jsPDF();

doc.text(20, 20, 'Hello world!');

doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');

doc.addPage();

doc.text(20, 20, 'http://www.coding4developers.com/');

// Save the PDF

doc.save('Test.pdf');

}

Cannot find module 'underscore' || install underscore module in angular 2

You need to install that libraries typings definitions in previous versions, if you want to use an JS library in TypeScript.

In newer version of TypeScript uses @types system. So now you don't need to install typings manually, you can just write this. For first install

npm install -g typescript@next

1 2	npm install -g typescript@next

And then

npm install --save underscore
npm install --save @types/underscore

1 2	npm install --save underscore npm install --save @types/underscore

Setup angular2 local development environment

1) Install node js
2) sudo npm install npm -g // install NPM
3) sudo npm install -g typescript // install typescript
4) git clone https://github.com/angular/quickstart.git quickstart // cloning angular2 setup
5) cd quickstart
6) sudo npm install
7) sudo npm start

Via CLI

1) Install node js
2) sudo npm install npm -g // install NPM
3) sudo npm install -g typescript // install typescript
4) npm install -g @angular/cli
5) ng new my-app
6) sudo npm start

Coding 4 Developers

Running Code Website

Category: Angular2,4,5,6,7,8

Upload file in Angular 2

Export data to CSV with headers in Angular 2

Generate PDF in Angular 2

Cannot find module 'underscore' || install underscore module in angular 2

Setup angular2 local development environment

Share This:

Share This:

Share This:

Share This:

Share This:

Share This: