Preview before upload with angular 4 in modal, using embed or iframe

Question

I had problems with this code, because of the pop ups:

@component
public visualizarArquivo(file): void {
    var url = window.URL.createObjectURL(file);
    var a = document.createElement("a");
    a.setAttribute("href", url);
    a.setAttribute("target", "_blank");
    a.click();
}


@html
<div class="col-md-6">
    <fieldset class="form-group">
        <label for="exampleInputFile">{{ 'Foto 3x4' | translate }}</label>
        <input type="file" class="form-control-file" id="inputFileFoto" #arquivophoto accept=".pdf,.jpg,.jpeg,.png (change)="onFileChange($event)">
    </fieldset>

    <button id="view" type="button" class="btn btn" (click)="openPhoto(contentPhoto)">
        <span class="fa fa-eye"></span>
    </button>
</div>

Now, i need open this file in modal, how i can use iframe or embed?

Answer 1

Your code will something be like this if you prefer to use one of these 2 approaches-

Approach 1: ng2-pdf-viewer with this image preview code -

<div class="col-md-6">
    <fieldset class="form-group">
        <label for="exampleInputFile">{{ 'Foto 3x4' | translate }}</label>
        <input type="file" class="form-control-file" id="inputFileFoto" #arquivophoto accept=".pdf,.jpg,.jpeg,.png" (change)="showPreview($event)">
    </fieldset>
</div>

<div class="col-md-6">
    <img [src]="localUrl" *ngIf="localUrl && isImg" class="imgPlaceholder">
    <pdf-viewer [src]="localUrl" *ngIf="localUrl && isPdf" [render-text]="true" style="display: block;"></pdf-viewer>
</div>


export class AppComponent {          // or your component
    localUrl: any[];
    isImage = false;
    isPdf = false;
    constructor() { }
    showPreview(event: any) {
        if (event.target.files && event.target.files[0]) {
            if(event.target.files[0].type == "application/pdf") {
                isImage = true;
                isPdf = false;      // required, going forward
            }
            else {
                isPdf = true;
                isImage = false;    // required, going forward
            }
            var reader = new FileReader();
            reader.onload = (event: any) => {
                this.localUrl = event.target.result;
            }
            reader.readAsDataURL(event.target.files[0]);
        }
    }
}

Approach 2: Using an IFrame

<input type="file" class="form-control-file" id="inputFileFoto" #arquivophoto accept=".pdf,.jpg,.jpeg,.png" (change)="showPreview($event)">
<div class="embed-responsive embed-responsive-4by3">
    <iframe class="embed-responsive-item" [src]="localUrl"></iframe>
</div>

export class AppComponent {          // or your component
    localUrl: any[];
    constructor() { }
    showPreview(event: any) {
        if (event.target.files && event.target.files[0]) {
            var reader = new FileReader();
            reader.onload = (event: any) => {
                this.localUrl = event.target.result;
            }
        }
    }
}

You may show it in modal then! Just for basic understanding I shown it in a div