--------------------------ANGULAR HTML code------------------------------------------
div class="row mb-6" [hidden]="selectedFile!=null" (click)="openDialog()"
div class="col-xs-2 ml-4"
input id="image" (change)="onSelectedFile($event)" accept="image/jpeg,.pdf" type='file' hidden /
button id='uploadButton' class="btn btn-light-primary font-weight-bold btn-round btn-border"i class="fas fa-paperclip"/i/button
/div
div class="col-md-3 mt-3"
pspan class="clickable"Attach Files/spanlight(Kindly Upload files less than or equal to 20 MB.)/light/p
/div
/div
div class="row mb-6" [hidden]="selectedFile==null"
div class="col-xs-2 ml-4"
button class="btn btn-light-primary font-weight-bold btn-border"i class="far fa-file-image"/i/button
/div
div class="col mt-3"
pspan class="clickable"{{selectedFile?.name}}/spanlight (click)="clearFile()" i class="fa fa-times fa-sm ml-2"/i/light/p
/div
/div
--------------------------------------------------------ANGULAR components code ----------------------------------------------------------------
onSelectedFile(event) {
if (event.target.files.length 0) {
const file = event.target.files[0];
this.selectedFile = Fileevent.target.files[0];
const x = Math.round((this.selectedFile.size / 1024));
if ((this.selectedFile.type == 'image/jpeg') || (this.selectedFile.type == 'application/pdf')) {
//if (this.selectedFile.size 20971520)
if (x 20480) {
this.errorMessage = 'Files larger than 20 MB is not allowed.';
return false;
}
else
{
this.errorMessage = '';
}
}
else
{
this.errorMessage = 'Please upload image or pdf only';
return false;
}
var reader1 = new FileReader();
reader1.onload = (event: any) = {
this.uploadedFileData = reader1.result.toString();
};
reader1.readAsDataURL(file);
}
}
---------------------------------------------------------------------------------
public uploadedFileData: string;
------------------------------------------