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.
fileupload.cmp
<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 & .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"/>
Browse Images</span>
<span class="slds-file-selector__text slds-medium-show">{!v.filename}</span>
</label>
</div>
</div>
</div>
</div>
</div>
</aura:component>
fileuploadcontroller.js
({
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);
component.set("v.filename",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
- 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.