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
Sumant KuchipudiSumant Kuchipudi 

how to get file preview on Lightning Component?

Hi,
I have lightning components that displays images from ContentVersion as thumbnails and also links, when I click on the image its directly downloading the image but I would like it to open as preivew or open the image in a new tab/window. please advice.
below is the current line that displays image thumbnails with link to open big 
<aura:iteration items="{!v.items}" var="content">
	       <a href="/sfc/servlet.shepherd/version/download/'+{!content.id}" target="_blank"> <img src="/sfc/servlet.shepherd/version/download/'+{!content.id}" width="100" height="100"/> </a>
	    </aura:iteration>

 
Mohd RaisMohd Rais
Hi Sumant,
Please understand this example and change according to you. 
<<<-------Use in Component-------->>>

<aura:iteration items="{!v.currentFileSelect}" var="currentFile">
                    <a><lightning:pill class="slds-m-bottom_small attchPills" label="{!currentFile.Title}" name="{!currentFile.Id}" 
					onremove = "{! c.clearAttachment }" onclick="{!c.previewFile}" >
                        <aura:set attribute="media">
                            <lightning:icon iconName="doctype:attachment" size="large" alternativeText="icon"/>           
                        </aura:set>
                    </lightning:pill></a>
</aura:iteration>
				
<<<-------Use in Component Controller-------->>>
		
previewFile :function(c,e,h){
var selectedPillId = e.getSource().get("v.name");
$A.get('e.lightning:openFiles').fire({
        recordIds: [selectedPillId]
        });
},

Thanks
Mohd Rais
Sumant KuchipudiSumant Kuchipudi
Hi Mohd, thanks for example looks like its good example but Im running with issues after I converted this example to my code.. please check below code.
When I click the pill I'm not getting  then I was not getting "selectedPillId " value then I hard coded selectedPillId with my image rec id but then I got "AuraError: Assertion Failed!: recordIds must not be empty : undefined",

cmp: 
<aura:component 
	implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId,flexipage:availableForRecordHome" 
	controller="ImagesController" access="global" >
	<aura:attribute name="recordId" type="Id" />
	<aura:attribute name="data" type="Object"/>
    <aura:attribute name="items" type="List"/>
	<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
	
	    <aura:iteration items="{!v.items}" var="content">
                    <a><lightning:pill class="slds-m-bottom_small attchPills" label="{!content.Title}" name="{!content.Id}" 
					 onclick="{!c.previewFile}" >
                        <aura:set attribute="media">
                            <lightning:icon iconName="doctype:attachment" size="large" alternativeText="icon"/>           
                        </aura:set>
                    </lightning:pill></a>
		</aura:iteration>
    
</aura:component>

Controller.js: 
({
	doInit : function(component, event, helper) {
		var action = component.get("c.getImages");
		action.setParams({
            "recordId": component.get("v.recordId")
        });
		action.setCallback(this, function(response) {
		   var state = response.getState();
		   if(component.isValid() && state === 'SUCCESS') {
		       component.set("v.items", response.getReturnValue()); 
		   }
		});
		$A.enqueueAction(action);
        
	},
    previewFile :function(c,e,h){
		var selectedPillId = e.getSource().get("v.name");
		$A.get('e.lightning:openFiles').fire({
		        recordId: [selectedPillId]
	        });
	}
})

​​​​​​​
Mohd RaisMohd Rais
Hi Sumant,
This is working fine in my email component.
It's not working with VF_Page  and Site.
It's only working in Org
Please check the list of items. 
component.set("v.items", response.getReturnValue());
console.log('items List With Id-->>'+component.get("v.items"));

Thanks 
Mohd Rais 
Mohd RaisMohd Rais

Hi,

selectedPillId should be ContentDocument Id.

Here is the URL of the ContentDocument Soap API:

https://developer.salesforce.com/docs/atlas.en-us.api.meta/api/sforce_api_objects_contentdocument.htm

Thanks
ravi soniravi soni
Hi Sumant,
I would like to thank you for your question because in your question my answer was hide.I wanted to display Img of contentVersion.
I searched on google but not found any solution but your code helped me.
Thank you