Recently, I ventured into the world of angular4 and encountered an issue while attempting to showcase both a pdf file and an image file within a component.
The problem I faced is as follows:
Whenever I select an image, it displays correctly. However, when I choose a pdf file, the selected image is replaced, and the pdf file does not get displayed at all.
If you would like to take a look at my code on StackBlitz, here is the link: https://stackblitz.com/edit/angular-rq5ro5?file=src%2Fapp%2Fquestions-stepper%2Fquestions-stepper.component.html
I would greatly appreciate any assistance in resolving this issue.
HTML
<!-- Image File -->
<button class="col-sm-12 stylings"
mat-raised-button (click)="file.click()">{{caption}}</button>
<input hidden type="file" accept="image/*" #file onclick="this.value = null" (change)="onSelectFile($event)">
<mat-card class="col-sm-12" style="padding:4px">
<div style="display: flex;align-items: center;justify-content: center;">
<img [src]="selectedImage" class="img-responsive img" /></div>
</mat-card>
<!-- Pdf File -->
<button class="col-sm-12 stylings"
mat-raised-button (click)="file.click()">{{captionPdf}}</button>
<input hidden type='application/pdf' accept="application/pdf" #file1 onclick="this.value = null" (change)="onSelectPdfFile($event)">
<mat-card class="col-sm-12" style="padding:4px">
<div style="display: flex;align-items: center;justify-content: center;">
<img [src]="selectedPdf" class="img-responsive img" /></div>
</mat-card>
typescript
onSelectFile(event) {
if (event.target.files && event.target.files[0]) {
this.imageToUpload = event.target.files[0];
const reader = new FileReader();
reader.readAsDataURL(this.imageToUpload);
reader.onload = e => this.selectedImage = reader.result.toString();
this.caption = event.target.files[0].name;
}
}
onSelectPdfFile(event) {
if (event.target.files && event.target.files[0]) {
this.imageToUpload = event.target.files[0];
const reader = new FileReader();
reader.readAsDataURL(this.imageToUpload);
reader.onload = e => this.selectedPdf = reader.result.toString();
this.caption = event.target.files[0].name;
}
}