+ Start a Discussion
bharath kumar 52bharath kumar 52 

Display list of images from Attachment object in a lightning component

Hi All,

I am new to lightning development and am trying to accomplish the following :
1.)Display a list of pictures stored in attachment object.
2.)Select a pic and save it as dp.

Below is my implementation of the same. But i am not able to display them on the screen.
<!-- Component -->
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" 
                controller="displayAttchmentList" access="global">
    <!--force:LightningQuickAction,force:hasRecordId,-->
    <aura:handler name="init" action="{!c.returnAttList}" value="{!this}" />
    <aura:attribute name="atlist" type="String"/>
   <!-- <aura:attribute name="contactId" type="String" default="0032800001EXXan"/>
    <aura:attribute name="Pic" type="String"/> -->
    <div>
    	<table class="slds-table slds-table--bordered slds-table--cell-buffer">
                <thead>
                    <tr class="slds-text-title--caps" style="background: rgb(159, 170, 181);">
                        <th scope="col">
                            <div class="slds-truncate" title="Id">Id</div>
                        </th>
                        <th scope="col">
                            <div class="slds-truncate" title="Body">Attachment body</div>
                        </th>
                       
                        
                    </tr>
                </thead>
                <tbody>
                    
                   
                
                    <aura:iteration items="{!v.atlist}" var="acc">
                        <tr>
                            <td>
                                <div class="slds-truncate">{!acc.Id}</div>
                            </td>
                            <td>
                                <div class="slds-truncate"><img src="https://resttestdomain-dev-ed.lightning.force.com/one/one.app#/sObject/0032800001EXXanAAH"/></div>
                            </td>
                            
                          <!--  <td>
                                <div class="slds-truncate"><ui:outputRichText value="{!acc.body}"/>
</div>
                            </td> -->
                            
                        </tr>
                        
                        
                            
                    </aura:iteration>
                </tbody>
            </table>
    
    
    
    </div>
    
    
    
    
</aura:component>
 
//Controller
({
returnAttList : function(component, event, helper) {

    var actionImage = component.get("c.getImage");
   /* actionImage.setParams({
        parentId : component.get("v.actId")
    });*/

    actionImage.setCallback(this, function(a){
        var lsa=a.getState();
        
        if(lsa==="SUCCESS"){
        component.set("v.atlist",a.getReturnValue());
            console.log('Peace');
            console.log('LSA1 >>>>'+lsa);
      
        }
        else if(lsa==="ERROR"){
            var error=response.getError();
            console.log('LSA2 >>>>'+lsa);
            if(errors){
                if(errors[0] && errors[0].message){
                    console.log(errors[0].message);
                    
                }
            }
            
        }
        
       /* var attach = a.getReturnValue();
        component.set("v.imageSrc", "/servlet/servlet.FileDownload?file=" + attach.Id);
        console.log('>>>>>>>>>'+attach); */
    });

    $A.enqueueAction(actionImage);
}

})
 
//ApexMethod
@AuraEnabled
	public static list<Attachment> getImage(){
        //Id parentId
    

    return [select Id, Name,Body, ContentType from Attachment 
            where parentid='0032800001EXXanAAH' and ContentType in ('image/png', 'image/jpeg', 'image/gif')];
}

Can someone tell me where i am going wrong because i am not able to display the list of attachments on the screen which is the primary step.
However, when i change it to any other sobject i am able todisplay those records on the screen.
 
NagendraNagendra (Salesforce Developers) 
Hi Bharath,

Your approach is trying to display the body of the attachment, this is problematic for 2 reasons:
  • You did not select the body in your SOQL, but even if you did - this should not work, and not a good practice.
  • Best practice for displaying an attachment is formatting its URL path with the attachmentId and displaying it like this (inside your <aura:iteration>):
<img src="{!'/servlet/servlet.FileDownload?file=' + acc.Id}"/>
Hope this helps.

Thanks,
Nagendra
 
Ajinkya DhasAjinkya Dhas
#SalesforceKid ⚡
Learn How to 𝗗𝗶𝘀𝗽𝗹𝗮𝘆 𝗜𝗺𝗮𝗴𝗲𝘀 In 𝗟𝗶𝗴𝗵𝘁𝗻𝗶𝗻𝗴 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁 ☁️⚡️ Even for related objects.
𝗟𝗜𝗡𝗞 -
https://lnkd.in/gUcq79T
𝗚𝗘𝗧 𝗔𝗡𝗗𝗥𝗢𝗜𝗗 𝗔𝗣𝗣 -
lttps://lnkd.in/f2rXdwN (https://lnkd.in/f2rXdwN)
(𝗟𝗲𝗮𝗿𝗻. 𝗛𝗲𝗹𝗽. 𝗦𝗵𝗮𝗿𝗲.)
#salesforce #lightning #development