How to preview the uploaded any kind of file in angular?

Question

HTML:

     <mat-list-item role="listitem" *ngFor="let item of uploadedFiles">
            <div class="list-files">
            <span><a class="showlink"(click)="downloadFile(item.certificate_name,item.uploaded_doc_name)">{{item.uploaded_doc_name}}</a></span>
          <!-- <span>{{item.certificate_name | spliter}}</span> -->
            <span>{{item.expiry_date}}</span>
             <div class="btn-custom" (click)="delete(item)">Remove</div>
            </div>
     </mat-list-item>

component.ts:(Here is My code to download the file... Its downloading only text file.. but i need to download what kind of file i have uploaded that i have to download here..Then before download the file should preview in new tab.. could you please help me to do it?)

downloadFile(file_id, filename){
   const payload ={
    "company_id":this.data.company_id,
    "module_name": "Agent",
    "file_id":file_id
   }
   this.downloadFileError.unsubscribe()
   this.downloadFileSuccess.unsubscribe()
   this.store.dispatch(new DownloadFile(payload))
  this.downloadFileSuccess = this.store.pipe(select(getDownloadFileSuccess)).subscribe(result => {
     if(!!result){
      let dataType = result.type;
      let binaryData = [];
      binaryData.push(result.data);
      let downloadLink = document.createElement('a');
      downloadLink.href = window.URL.createObjectURL(new Blob(binaryData, {type: dataType}));
      if(filename){
        downloadLink.setAttribute('download', filename);
      }
      document.body.appendChild(downloadLink);
      downloadLink.click();
      downloadLink.parentNode.removeChild(downloadLink);
  this.store.dispatch(new GetDownloadFileSuccess(null))
     }
   })
  this.downloadFileError =  this.store.pipe(select(getDownloadFileError)).subscribe(result => {
    if(!!result){
      console.log(result)
    }
  })
 }

Answer 1

My response was array buffer,which I converted to binary for download and preview. I created 2 icons in my html one for download and one for preview, when I click download I will call this function and for preview I used this SafeUrl inside iframe. I think this will be more clear for you.

arrayBufferToBase64(buffer, type, fileName) {
    let binary = '';
    const bytes = new Uint8Array(buffer);
    const len = bytes.byteLength;
    for (let i = 0; i < len; i++) {
      binary += String.fromCharCode(bytes[i]);
    }
    const file = window.btoa(binary);
    const mimType = type === 'pdf' ? 'application/pdf' : type === 'xlsx' ? 'application/xlsx' : type === 'pptx' ? 'application/pptx' : type === 'csv' ? 'application/csv' : type === 'docx' ? 'application/docx' : type === 'jpg' ? 'application/jpg' : type === 'png' ? 'application/png' : '';

    const url = `data:${mimType};base64,` + file;
   this.SafeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
      const a = document.createElement('a');
      a.href = url;
      a.download = fileName;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      window.URL.revokeObjectURL(url);

Answer 2

pass type also into the function and update the extension in type;

eg:

   downloadLink.href = window.URL.createObjectURL(new Blob(binaryData, {type: 'application/pdf'}))

use this to get the extension of file uploaded

  fileType = filename.substr(filename.lastIndexOf('.') + 1); 

to view the document you have to convert to safeUrl

var url = window.URL.createObjectURL(new Blob(binaryData, {type: dataType}));
 safefileUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);