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 :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<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>
|
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. ...