+ Start a Discussion
Stéphane C.Stéphane C. 

Display attachement in Lightning Component

Hi,

I use this Lightning Component to upload an attachment. http://sfdcmonkey.com/2017/09/25/file-upload-lightning-component/

I want to display it when it is dwonload.

Any idea to achieve this?
Ajay K DubediAjay K Dubedi
Hi Stéphane,

You can create very simple lightning component to display image from static resource or attachment/file
Static resource
<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    <img src="{!$Resource.StaticResourceName}"/>
</aura:component>

if you are using attachment or file. View attachment and use that URL like this:
<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    <img src="https://ajaydubedi--dev2--c.cs68.content.force.com/servlet/servlet.FileDownload?file=00P1D000000Iiyd"/>
</aura:component>

Then add the lightning component in your page.


Please mark as best answer if it helps you.

Thank You
Ajay Dubedi
Stéphane C.Stéphane C.
Thank you Ajay.

I will give a try to your answer.

I change my approach with this new source : https://developer.salesforce.com/docs/component-library/bundle/lightning:fileUpload/example#lightningcomponentdemo:exampleFileUpload

Here is my code :

CMP
<aura:component implements="force:lightningQuickActionWithoutHeader,force:appHostable,force:hasRecordId,flexipage:availableForAllPageTypes">
    <aura:attribute name="accept" type="List" default="['.jpg', '.jpeg', '.png']"/>
    <aura:attribute name="multiple" type="Boolean" default="false"/>
    <aura:attribute name="disabled" type="Boolean" default="false"/>

    <lightning:fileUpload  name="fileUploader"
                           label= "Demo Upload"
                           multiple="{!v.multiple}"
                           accept="{!v.accept}"
                           disabled="{!v.disabled}"
                           recordId="{!v.recordId}"
                           onuploadfinished="{! c.handleUploadFinished }"/>
    
	<lightning:fileCard fileId="0699E000000STr5QAG"/>

</aura:component>
CONTROLLER
({
    handleUploadFinished: function (cmp, event) {
        // This will contain the List of File uploaded data and status
        var uploadedFiles = event.getParam("files");
        // alert("Files uploaded : " + uploadedFiles.length);
        $A.get("e.force:closeQuickAction").fire();
        $A.get('e.force:refreshView').fire();
    }
})
How can I change the static ID by the last ulpoaded file ID of the current record ?

My goal is to create a field in the page layout of the current record to display the image like a formula field : IMAGE("'/servlet/servlet.FileDownload?file=" + MyFileID + "'", "My File")