function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Monin SavantMonin Savant 

Preview pdf file from lwc

Hello!

I want to preview pdf file from lwc component. I get the id of all files that refer to the record, but when I click on the button, I get the message
"Error in $A.getCallback() [Cannot read properties of undefined (reading 'errors')]". Why

My JS file 
  
previewHandler()
    {
        this[NavigationMixin.Navigate]({
            type: 'standard__namedPage',
            attributes: {
                pageName: 'filePreview'
            },
            state : {
                recordIds: this.files,
               selectedRecordId: this.files[0]
            }
          })

    }

Thanks in advance!
 
Best Answer chosen by Monin Savant
AbhinavAbhinav (Salesforce Developers) 
Check this for refernce:

https://www.salesforcetroop.com/file_preview_lwc

Thanks!

All Answers

AbhinavAbhinav (Salesforce Developers) 
Check this for refernce:

https://www.salesforcetroop.com/file_preview_lwc

Thanks!
This was selected as the best answer
mukesh guptamukesh gupta
Hi Monin,

Please follow below url:-

https://developer.salesforce.com/blogs/2019/07/display-pdf-files-with-lightning-web-components


if you need any assistanse, Please let me know!!

Kindly mark my solution as the best answer if it helps you.

Thanks
Mukesh
Pawan Singh SisodiyaPawan Singh Sisodiya
Hi 
Monin Savant,
It's too late to answer but it can helps other folks.
  
<template>
    <div class="slds-form-element">
        <lightning-input
            type="file"
            label="Upload PDF File"
            onchange={handleFileUpload}>
        </lightning-input>
    </div>
    <div class="slds-form-element">
        <a href={fileUrl}  target="_blank">{fileName}</a>
    </div>
</template>
  
import { LightningElement, track } from 'lwc';

export default class InputFileUploadPDF extends LightningElement {
    fileName = '';
    fileUrl = '';

    handleFileUpload(event) {
        const file = event.target.files[0];
        this.fileName = file.name;
        this.fileUrl = URL.createObjectURL(file);
    }

}

We don't need to use '_blank'  or window.open because <a></a> tag will automatically redirect you on the new page