Close lightning component modal from within the modal

Question

I have a modal that allows a user to select some options and then upload a file. I want to close the modal as soon as the upload completes (the user clicks the Done button). So here's my code:

Parent markup

<lightning:overlayLibrary aura:id="overlayLib"/>
...
<lightning:buttonIcon iconName="utility:upload" 
                      variant="border" 
                      alternativeText="Upload Files" 
                      title="Upload Files"
                      onclick="{!c.handleShowModal }" disabled="{!v.disabled}"/>

Parent controller

handleShowModal: function(component, evt, helper) {
    var modalBody;
    var modalHeader;
    var recordId = component.get("v.myObjId");
    $A.createComponent("c:fileUploadModal", {relatedRecordId: recordId},
        function(content, status) {
            if (status === "SUCCESS") {
                modalBody = content;
                modalHeader = $A.get("$Label.c.Upload_Modal_Header");
                component.find('overlayLib').showCustomModal({
                   header: modalHeader,
                   body: modalBody, 
                   showCloseButton: true,
                   cssClass: "mymodal",
                   closeCallback: function() {
                       // Refresh our list of files
                       helper.retrieveDocs(component, event, helper);
                   }
               })
           }                               
        });
}

Modal markup

<lightning:fileUpload  name="fileUploader"
                       multiple="false"
                       accept="{!v.fileExtensions}"
                       recordId="{!v.relatedRecordId}"
                       onuploadfinished="{!c.handleUploadFinished }"/>  

Modal controller:

handleUploadFinished: function (component, event) {
    var uploadedFiles = event.getParam("files");
    console.log(uploadedFiles[0].documentId); // See? it works.
    component.find("overlayLib").notifyClose();
}

Obviously the .notifyClose() isn't working because component.find("overlayLib") returns undefined since that component does not have access to the parent component.
I tried document.getElementsByClassName('uiButton--modal-closeBtn')[0].click() but that doesn't work because of Aura.
So how do I programmatically close the modal after the user acknowledges that their file has been uploaded successfully?

Answer 1

Final Edit:

Solution based on passing overlayLib as an attribute to dynamically created modal component.

Last idea that I had (and tested) is to pass overlayLib as an attribute when dynamically creating modal:

<aura:component implements="flexipage:availableForAllPageTypes">
    <aura:attribute name="lib" type="Object"/>
    <lightning:fileUpload  name="fileUploader"
                           multiple="false"
                           accept="{!v.fileExtensions}"
                           recordId="{!v.relatedRecordId}"
                           onuploadfinished="{!c.handleUploadFinished }"/>  
</aura:component>


handleUploadFinished: function (component, event) {
    var uploadedFiles = event.getParam("files");
    console.log(uploadedFiles[0].documentId); // See? it works.
    component.get("v.lib").notifyClose();
}

Creating modal

handleShowModalFooter : function (component, event, helper) {
    var modalBody;
    var modalFooter;
    $A.createComponents([
        ["c:modalContent",{'lib':  component.find('overlayLib')}],
        ["c:modalFooter",{}]
    ],
    function(components, status){
        if (status === "SUCCESS") {
            modalBody = components[0];
            modalFooter = components[1];
            component.find('overlayLib').showCustomModal({
               header: "Application Confirmation",
               body: modalBody, 
               footer: modalFooter,
               showCloseButton: true,
               cssClass: "my-modal,my-custom-class,my-other-class",
               closeCallback: function() {
                   alert('You closed the alert!');
               }
           })
        }
    }
   );
}

Edit: Ok I didnt fully understand question, so I'm adding new answer with old one staying just for reference.

You can of course create footer for your modal with buttons that will handle modal close.

Example mainly from the docs:

Modal footer component:

<aura:component>
    <lightning:overlayLibrary aura:id="overlayLib"/>
    <lightning:button name="cancel" label="Cancel" onclick="{!c.handleCancel}"/>
    <lightning:button name="Close" label="Close" variant="brand" onclick="{!c.handleCancel}" disabled="true"/>
</aura:component>

Footer controller:

({
    handleCancel : function(component, event, helper) {
        //closes the modal or popover from the component
        component.find("overlayLib").notifyClose();
    }
})

Creating modal controller:

({
handleShowModalFooter : function (component, event, helper) {
    var modalBody;
    var modalFooter;
    $A.createComponents([
        ["c:modalContent",{}],
        ["c:modalFooter",{}]
    ],
    function(components, status){
        if (status === "SUCCESS") {
            modalBody = components[0];
            modalFooter = components[1];
            component.find('overlayLib').showCustomModal({
               header: "Application Confirmation",
               body: modalBody, 
               footer: modalFooter,
               showCloseButton: true,
               cssClass: "my-modal,my-custom-class,my-other-class",
               closeCallback: function() {
                   alert('You closed the alert!');
               }
           })
        }
    }
   );
}
})

I on purpose made one button disabled in a footer so you can enable that in your code

Answer 2

Before I get to the answer, thank you very much to user1974566 for your assistance, you eventually led me to the correct solution which is as follows:

First of all (which I discovered towards the end), things change and the way to close a modal now is via promise. See this question. The correct solution is as provided by Oles Malkov. I'll summarize it here.
On the parent component (the one that launched the modal) notifyClose() no longer does anything. I discovered this after I was eventually able to capture the event fired by the modal in the parent component (explained below) but it wasn't closing the modal.
The correct way to do that is to save the promise returned by showCustomModal() as an aura:attribute and use that to close the modal.

Second, there is a way to subvert the component hierarchy that got subverted by the modal: APPLICATION events. That fired an event into the void of the application, regardless of the component hierarchy. This allowed my parent component to capture the event from the modal (which should have been its child) and close it.
Full solution:

Parent markup

<aura:attribute name="modalPromise" type="Aura.Action"/> <!--Save the promise from opening the file upload modal-->
<aura:handler event="c:fileUploaded" action="{!c.handleFileUploaded}"/>
<lightning:overlayLibrary aura:id="overlayLib"/>
...
<lightning:buttonIcon iconName="utility:upload" 
                  variant="border" 
                  alternativeText="Upload Files" 
                  title="Upload Files"
                  onclick="{!c.handleShowModal }" disabled="{!v.disabled}"/>

Parent Controller

handleShowModal: function(component, evt, helper) {
...
$A.createComponent("c:fileUploadModal", {relatedRecordId: recordId},
    function(content, status) {
        if (status === "SUCCESS") {
            ...
            var modalPromise = component.find('overlayLib').showCustomModal({
               ...
            });
           component.set("v.modalPromise", modalPromise);
       }                               
    });
},

handleFileUploaded : function(component, event, helper){
    // component.find("overlayLib").notifyClose(); DOES NOT WORK
    component.get('v.modalPromise').then(function (modal){
        modal.close();
    });
}

Event

<aura:event type="APPLICATION">
</aura:event>  

Modal Markup

<aura:attribute name="relatedRecordId" type="string"/>
<aura:registerEvent name="fileUploaded" type="c:fileUploaded"/>

<lightning:fileUpload  name="fileUploader"
                   multiple="false"
                   accept="{!v.fileExtensions}"
                   recordId="{!v.relatedRecordId}"
                   onuploadfinished="{!c.handleUploadFinished }"/>  

Modal Component

handleUploadFinished: function (component, event) {
    var fireEvent = $A.get("e.c:fileUploaded");
    fireEvent.fire();
}

tl;dr:

• In the parent component save the promise from launching the modal.
• From the modal send an APPLICATION event when files are uploaded.
• In the parent component listen for that event and close the modal using saved promise.