Skip to main content
Topics#Lightning ExperienceArpit Jain's Question
Arpit Jain (Megnasoft AI) asked in #Lightning Experience
Mar 29, 2021, 4:09 AM

File preview is not working in community with LWC component

Hello Everyone,

I am using an lwc component on which users will upload a file and they can also preview that. For a preview, I am using navigationMixin and navigate the record to standard_namedPage which working fine for internal use but the same method is not working in the community. I am not able to preview the file using that. Today I did some research and get to know standard_namedPage not supported community and for that, I need to use standard_webPage which redirects me to the new tab and I can see my file there but the issue is on that new tab I can see my file as a thumbnail, not the actual file. Can someone guide me on how can I preview files in the community as the original file?

Below is the code that I am using for both internal and external.

 

Internal:

this[NavigationMixin.Navigate]({

type: 'standard__namedPage',

attributes: {

pageName: 'filePreview'

},

state : {

// assigning ContentDocumentId to show the preview of file

selectedRecordId:event.currentTarget.dataset.id

}

})

External:

//Getting content version id to assign the url.

contentVersionId = response;

var baseURL = 'https://'+location.host+'/';

var previewURL = baseURL + 'sfc/servlet.shepherd/version/renditionDownload?rendition=THUMB720BY480&versionId='+contentVersionId;

this[NavigationMixin.Navigate]({

type: 'standard__webPage',

attributes: {

url: previewURL

}

}, false );

Thanks,

Arpit Jain
8 answers
  1. Arpit Jain (Megnasoft AI)
    May 11, 2021, 3:04 AM

    @SumitKumar10

    For LWC I didn't get any solution but for Aura component you can show preview on community.

    For You can refer below code:

    Component Code:

    <aura:iteration items="{!v.SignedGADPackage}" var="item" indexVar="index">

    <tr>

    <td width="25%">

    {!item.docName}

    </td>

    <td width="25%">

    <lightning:formattedDateTime value="{!item.generatedDocTime}" year="numeric"

    month="numeric" day="numeric" hour="2-digit" minute="2-digit"

    hour12="true" />

    </td>

    <td width="25%">

    {!item.generatedBy}

    </td>

    <td width="25%">

    <a href="" id="{!item.conDocId}" onclick="{!c.previewFile}">View&nbsp;

    <lightning:icon size="x-small" iconName="action:preview" alternativeText="Preview"

    title="Preview" />

    </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    <a href="javascript:void(0)" id="{!item.conDocId}"

    onclick="{!c.downloadFiles}">Download&nbsp;

    <lightning:icon size="x-small" iconName="action:download" alternativeText="Download"

    title="Download" />

    </a>

    </td>

    </tr>

    </aura:iteration>

    JS Code:

    previewFile: function (component, event, helper) {

    var rec_id = event.currentTarget.id;

    $A.get('e.lightning:openFiles').fire({

    recordIds: [rec_id]

    });

    },

    downloadFiles : function (component, event, helper)

    {

    var documentId = event.currentTarget.id;

    var urlString = window.location.href;

    var baseURL = urlString.substring(0, urlString.indexOf("/s"));

    var urlEvent = $A.get("e.force:navigateToURL");

    urlEvent.setParams({

    "url": baseURL + '/sfc/servlet.shepherd/document/download/' + documentId + '?operationContext=S1'

    });

    urlEvent.fire();

    },

    Please markit as best answer if this helps you.

    Thanks,

    Arpit
Write an answer...
0/9000