I have a sample lightning component used in a lightning tab, which gets the file name from input type "file" and displays the name beside the input element.

File Upload Form


<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="filename" type="String" default="" access="global"/>
    <div class="slds-modal__content slds-p-around--medium">
        <div class="slds-form-element">
            <div class="slds-form-element__control">
                <span class="slds-form-element__label" id="file-selector-id">Accepts .png &amp; .jpg images </span>
                <div class="slds-file-selector slds-file-selector--files">
                    <div class="slds-file-selector__dropzone">
                        <input aura:id="profilePic" type="file" class="slds-file-selector__input slds-assistive-text" accept="image/*" id="file-upload-input-01" aria-describedby="file-selector-id" onchange="{!c.getFileName}"/>
                        <label class="slds-file-selector__body" for="file-upload-input-01">
                            <span class="slds-file-selector__button slds-button slds-button--neutral">
                                <lightning:icon iconName="utility:upload" size="x-small" alternativeText="Upload Picture"/>
                                &nbsp; Browse Images</span>
                            <span class="slds-file-selector__text slds-medium-show">{!v.filename}</span>


    getFileName : function(component, event, helper) {
        var fileInput = component.find("profilePic").getElement();
        var file = fileInput.files[0];
        console.log('File from Component Before : '+component.get("v.filename"));
        console.log('File Name : '+file.name);
        console.log('File from Component After : '+component.get("v.filename"));
  • During the first visit or when we reload the page, the file upload functionality works fine.
  • When we upload an image called step1.png, the behaviour as follows


  • The logs indicate the before and after context changes to the component values. And we are able to see the step1.png value updated to the DOM as well.

Issue :

  • When we switch between the lightning tabs , ie when we navigate to any standard tab and revisit the lightning component tab. the issue occurs

Non Working scenario

  • The logs indicate the component value being updated from old file (step1.png) to new file (flower.png)
  • However the updated component values are not reflecting in the screen (No DOM Update ).

Troubleshooting :

I was suspecting if the execution was going outside the component life cycle when switching tabs. Hence tried using $A.getCallback(), but it did not make any difference. And the critical update "Locker Service Security" makes no difference as well. This behavior is seen irrespective of locker service.

Am i missing something here ? Why am i not able to see the component value update on the DOM.


Since the component definitions that are cached are not clear/destroyed upon Navigation to different tabs in LEX, seems to cause this issue. But as a workaround you can destroy the component yourself when navigation happens. Check this answer out, it will solve your issue.

  • Praveen: The solution works fine. I am wondering are we supposed to destroy the components or it is something that Salesforce ought to have fixed ? Feb 4 '17 at 13:54
  • 1
    Destroying the component is the only way to solve this problem.I believe Sf should fix this problem.I don't know if it's has been reported to sf.If you could create a case it might help them to track the issue.
    – Praveen
    Feb 4 '17 at 15:05

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.