1

I have created a Lightning component which shows a list of files related to a record.

I would like to know how I can alter the controller/helper to display the .no-files on load but hide the section if results have been found in my getMyAttachments method?

Component

<aura:attribute name="recordId" type="Id" />

<aura:handler event="aura:waiting" action="{!c.waiting}"/>
<aura:handler event="aura:doneWaiting" action="{!c.doneWaiting}"/>

<div class="container">

    <input type="file" class="file" aura:id="file" />
    <ui:button class="slds-button slds-button_brand" label="Upload File" press="{!c.save}"/>

    <div aura:id="uploading" class="notUploading">
        <img src="/auraFW/resources/aura/images/spinner.gif" alt="uploading" class="small-spinner" /> Uploading...
    </div>
</div>

<aura:attribute name="AttachmentList" type="Attachment[]"/>
<aura:handler name="init" value="{!this}" action="{!c.getMyAttachments}" />

<div class="container">
    <h3>Files Uploaded</h3>
    <!-- <p class="no-files">You havent uploaded any files yet.</p> -->

    <ul class="uploaded-files">
        <aura:iteration var="file" items="{!v.AttachmentList}">
            <li>{!file.Name}</li>
        </aura:iteration>
    </ul>

</div>

fileUploadController.js

({  
    save : function(component, event, helper) {
        helper.save(component);
    },

    waiting: function(component, event, helper) {
        $A.util.addClass(component.find("uploading").getElement(), "uploading");
        $A.util.removeClass(component.find("uploading").getElement(), "notUploading");
    },

    doneWaiting: function(component, event, helper) {
        $A.util.removeClass(component.find("uploading").getElement(), "uploading");
        $A.util.addClass(component.find("uploading").getElement(), "notUploading");
        self.getMyAttachments;
    },

    getMyAttachments: function(component){
        var action = component.get("c.Attachments");
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.AttachmentList", response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    }

})

1 Answer 1

2

There are two possible ways. Either you hide the element with slds-hide or you just don't render it using aura:if:

1)

<p class="{!'no-files' + (empty(v.AttachmentList) ? '' : ' slds-hide')}">
    You havent uploaded any files yet.
</p>

<ul class="{!'uploaded-files' + (empty(v.AttachmentList) ? ' slds-hide' : '')}">
    <aura:iteration var="file" items="{!v.AttachmentList}">
        <li>{!file.Name}</li>
    </aura:iteration>
</ul>

2)

<aura:if isTrue="{!empty(v.AttachmentList)}">
    <p class="no-files'">
        You havent uploaded any files yet.
    </p>

    <aura:set attribute="else">
      //render list here
    </aura:set>
</aura:if>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .