Lightning Components – Implementing Document Previewer Functionality

This will help to you

Component:

    <aura:iteration var="a" items="{!v.AccountList}" indexVar="indx">
        <ui:inputCheckbox aura:id="pick" text="{!a.BillingCity}" name="{!indx}" label="{!a.BillingCity}" change="{!c.selectoptionvalue}"/>
    </aura:iteration>

<aura:iteration items="{!v.selectedvalues}" var="account">
    <article class="slds-card">
        <div class="slds-card__header slds-grid">
            <header class="slds-media slds-media--center slds-has-flexi-truncate">
                <div class="slds-media__body slds-truncate">
                    <h2>
                        <a href="javascript:void(0);" class="slds-text-link--reset">
                            <span class="slds-text-heading--small">{!account.Name}</span>
                        </a>
                    </h2>
                </div>
            </header>
        </div>
        <div class="slds-card__body">{!account.BillingCity}</div>

    </article>
</aura:iteration>

Controller:

({

initmethod : function(component,event,helper){
    var action = component.get("c.getAccountList");
    action.setCallback(this,function(a){
        var state=a.getState();
        if(state == "SUCCESS"){
            component.set("v.AccountList",a.getReturnValue());
        }

    });
    $A.enqueueAction(action);
},

selectoptionvalue :function(component,event,helper){
    var temp=component.get("v.selectedvalues");
    var selectedcity=component.get("v.SelectedCity");
    var accountdetails = component.get("v.AccountList");
     temp = [];//empty when while changing Picklist value
    if(event.getSource().get("v.value")){
        selectedcity.push({'ids':event.getSource().get("v.name"),'name':event.getSource().get("v.text"),'value':event.getSource().get("v.value")});
    }
    if(event.getSource().get("v.value") == false){
        for(var j=0;j<selectedcity.length;j++){
            if(selectedcity[j].ids == event.getSource().get("v.name")){
                var index = j;
            }
        }
         selectedcity.splice(index,1);
     }
      component.set("v.SelectedCity",selectedcity);      
    var accountdetails = component.get("v.AccountList");        
    for(var i=0;i<accountdetails.length;i++){
        for(var k=0;k<selectedcity.length;k++){
            if(accountdetails[i].BillingCity == selectedcity[k].name){
                temp.push(accountdetails[i]);
            }
        }
    }

    component.set("v.selectedvalues",temp);
}

})

Apex:

public class valuesget {
    @AuraEnabled
    public static List<Account> getAccountList(){
        return [Select Id,Name,BillingCity  From Account where BillingCity != null];
    }
}

(The post below actually doenst work. CSV will cause a 404, because that file type never generates a preview. But PDF/xlxs/doc etc will show a broken link, but not a 404... )

For my purpose, the onerror event worked. There are many examples on stack exchange.

<img  onerror="{!c.imageError}" src="{!'/sfc/servlet.shepherd/version/renditionDownload?rendition=THUMB720BY480&amp;versionId='+ v.LatestPublishedVersionId }"

If there is a '404 image not found' error, the event fires, and then I hide the div containing the Image, and unhide a div with a message to the effect of 'Your image preview will be available shortly'. Then the next time the user comes back, or refreshes the page, the image should appear.

I figure I could do some kind of polling or reloading the image every second to check if the 404 Error still exists, but Im worried that may lead to other browser issues. I may look for a better solution later, but this User Experience is more acceptable than a broken image.