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);
    }

})
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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.