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.
