0

I am trying to do 2 things here

1.Custom file upload using Lightning:fileupload 2. List of files attached to the same record.

I an hoping after a file is uploaded, the list should refresh after the file upload.

enter image description here

I am not able to refresh the 2nd component after a file is uploaded by 1st component.

Code below:

-->

    <lightning:fileUpload  name="fileUploader"
                          label= "Upload files"
                          multiple="{!v.multiple}"
                          accept="{!v.accept}"
                          disabled="{!v.disabled}"
                          recordId="{!v.recordId}"
                          onuploadfinished="{!c.handleUploadFinished}"/>
</lightning:card>

<c:ListOfFiles recordId="{!v.recordId}"/>

2nd component:

<aura:attribute name="filelist" 
                type="ListWrapper.DisplayRecords[]" />  

<aura:attribute name="recordId" type="Id" />
<aura:attribute name="myBool" type="Boolean" default="true"/>
<aura:attribute name="selectedDocumentId" type="string"/>
<aura:attribute name="hasModalOpen" type="boolean" default="false"/>


<!--- on initialization of component init event will fire and doInit action will execute-->
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:handler name="change" value="{!v.myBool}" action="{!c.doInit}"/>


<div class="slds-card_boundary">
    <h2>Files</h2>
    <table class="slds-table slds-table_cell-buffer slds-table_bordered">
        <thead>
            <tr class="slds-line-height_reset">
                <th></th>
                <!--<th>Id</th>-->
                <th class="slds-text-title_caps" scope="col">
                 <div class="slds-truncate" title="Title">Title</div>
                </th>
                <th class="slds-text-title_caps" scope="col">
                 <div class="slds-truncate" title="File Size">File Size</div>
                </th>
                <th class="slds-text-title_caps" scope="col">
                <div class="slds-truncate" title="File Type">File Type</div>
                </th>
                <th class="slds-text-title_caps" scope="col">
                <div class="slds-truncate" title="File Size">Sharing</div>
                </th>
            </tr>
        </thead>
        <tbody>
            <!-- TO Check if list is not empty-->
            <aura:if isTrue="{!!empty(v.filelist)}">
                <aura:iteration var="files" items="{!v.filelist}" >
                    <tr>
                        <td><ui:inputCheckbox value="{!files.isSelected}"/></td>
                        <td>
                            <a onclick="{!c.getSelected}" data-Id="{!files.ContentDocId}">{!files.Title}</a>
                            </td>
                        <td><ui:outputText value="{!files.Createby.name}"/></td>
                        <td><ui:outputText value="{!files.ContentSize}"/></td>
                        <td><ui:outputText value="{!files.FileType}"/></td>
                        <td><ui:outputText value="{!files.SharingType}"/></td>

                    </tr>
                </aura:iteration>
            </aura:if>
        </tbody>
    </table>
     <!--###### FILE PREVIEW MODAL BOX START ######--> 
<aura:if isTrue="{!v.hasModalOpen}">
    <section onclick="{!c.closeModel}"
             role="dialog"
             aria-modal="true"
             class="slds-modal slds-fade-in-open">
        <div class="slds-modal__container">
            <div class="slds-modal__content slds-p-around_medium slds-text-align_center"
                 style="background: transparent;">
                <div style="width: 50%; margin: 0 auto; text-align: left">
                    <!--<lightning:fileCard> to preview file using content document Id -->
                    <lightning:fileCard fileId="{!v.selectedDocumentId}"/>
                </div>
            </div>
        </div>
    </section>
    <div class="slds-backdrop slds-backdrop_open"></div>
</aura:if>
<!--###### FILE PREVIEW MODAL BOX END ######-->
    <br/>
    <lightning:button label="Mark Private" onclick="{!c.doSomething}"/>
</div>

2

From your parent component, you can use aura:method to call child component method.

Define this in child component

<aura:method name="sampleMethod" action="{!c.doInit}" description="Calling chld method">

and in the parent component's handleUploadFinished method call the child component method.

var childCmp = component.find('childCmp'); //childcmp is the aura:id of child component
childCmp.sampleMethod();

Aura:Method

  • @HaraPrasadSahoo then you can accept the answer and close this question. – Tushar Sharma Jan 10 at 11:31

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.