[SalesForce] Get the image in file – lightning experience

I have to display an image in a lightning component. So in Salesforce classic I put this image in an attachment related to an object, but in lightning experience there is no attachment, or I didn't find them. There is only the possibility to add a file.

My question is how can I retrieve this file in my component ? For an attachment I retrieve the attachment like that :

List<Attachment> img = [select Id, Name, ContentType, parentId from Attachment 
                            where parentId in :listeId and ContentType in ('image/png', 'image/jpeg', 'image/gif')];

and in my component I put that :

<img src="{!'/servlet/servlet.FileDownload?file=' + a.image.Id}" alt=""/>

but it doens't retrieve me the url of the image in the file.

Best Answer

If you can get the base64 encoded string from the Attachment, you can use that as src of the image.

Example:

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#Embedding_an_image_via_data_URL

Also check this answer:

https://stackoverflow.com/a/9511375/6110447

Edit: Query for Body of the Attachment, it is base64 encoded.

Related Solutions

[SalesForce] How to get content of Attached file lightning

You will need to query the contentLinkDocument records with the EntityId equal to the record Id .

And also ContentLinkDocument will give you Id of the content Document and you will need a query against content document to get the necessary file

SELECT ContentDocumentId FROM ContentDocumentLink WHERE LinkedEntityId = '[RECORD ID]'

Then SOQL on ContentDocument

Select Id ,Title from ContentDocument Where ID In :[CONTENTDOCUMENTLIST]

Update

If you use Files or content related object there is a simple event with new lightning namespace which can be used

Here is a sample quick POC

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global" >
  <aura:attribute name="contentId" type="String" default="069B00000015QMwIAM"/>
 <lightning:button variant="brand" label="Preview Reciept" onclick="{!c.preview }" />

Note that the default here is the Id of the content document .

The controller code for same is below

({
  preview : function(component, event, helper) {
   $A.get('e.lightning:openFiles').fire({
    recordIds: [component.get("v.contentId")]
   });
  }
})

[SalesForce] Playing Audio files attached to Opportunities in a Lightning Component

This is working for me. Do you have different settings? I tested this on Chrome browser. Also this is on Spring'17 environment.

HelloWorldApp.app:

<aura:application extends="force:slds">
    <c:PlayAudioFile></c:PlayAudioFile>
</aura:application>

PlayAudioFile.cmp:

<aura:component >
    <audio src="https://john-dev-ed--c.na31.content.force.com/servlet/servlet.FileDownload?file=00P37000008SP6U" 
            autoplay="true">
    </audio>
</aura:component>

I don't see any CSP errors in the console.

EDIT:

If there are any CSP errors in the console, URL needs to be whitelisted in security controls(setup) as OP mentioned in the below comments.

Best Answer

Related Solutions

[SalesForce] How to get content of Attached file lightning

[SalesForce] Playing Audio files attached to Opportunities in a Lightning Component

Related Topic