1

I'm trying to upload a file with Json text inside and preview it in a lightning component.

I managed to get all file text to show only in console or Alert and I'm not able to set and display the text on a lightning attribute.

What am I missing here ?

component

    <aura:attribute name="jsonFileText"  type="String" access="private"/> 
    <aura:attribute name="fileName" type="String" default="No File Selected.." />

    <lightning:input aura:id="fileupload" accept= '.json' onchange="{!c.handleFilesChange}" type="file" name="file" label="Upload Attachment" multiple="false"/>
    <div class="slds-text-body_small slds-text-color_error"> {!v.fileName} </div>

FILE TEXT:
{!v.jsonFileText}

js controller

handleFilesChange : function(component, event, helper) {
    var fileName = 'No File Selected..';
    var fileOutput = {};

    if (event.getSource().get("v.files").length > 0) {
        var file = event.getSource().get("v.files")[0];
        fileName = file['name'];
        var reader = new FileReader();
        reader.onload = function(e) {
            var contents = e.target.result;
            fileOutput = JSON.parse(contents);
            //will display the file text in console
            console.log(fileOutput);
          }
        reader.readAsText(file);

        //this refuse to be shown
        component.set('v.jsonFileText', JSON.stringify(fileOutput)); 
        //shows OK
        component.set("v.fileName", fileName);

    }
    component.set("v.fileName", fileName);
},
  • Are you sure you are hitting that line? Are you sure your controller saved? Because you are missing your closing parenthesis on component.set. – Adrian Larson Jan 2 at 17:50
  • yeah fixed it now - it happened while copy paste my code here - but making my attribute public and placing the component.set inside the reader.onload function seems to solve it. – sfdx bomb Jan 2 at 18:35
3

There are 3 things which you need to make it work.

  1. You are missing a closing round bracket ) after component.set('v.jsonFileText', JSON.stringify(fileOutput);

  2. component.set('v.jsonFileText', JSON.stringify(fileOutput)); should be inside reader.onload function as the contents would be read asyncornously.

  3. The access for attribute "jsonFileText" should not be private as you are setting it value Asynchronously in new transaction of onload where you cannot access the value.

Component:

    <aura:application extends="force:slds" >
    <aura:attribute name="jsonFileText"  type="String"  /> 
    <aura:attribute name="fileName" type="String" default="No File Selected.." />

    <lightning:input aura:id="fileupload" accept= '.json' onchange="{!c.handleFilesChange}" type="file" name="file" label="Upload Attachment" multiple="false"/>
    <div class="slds-text-body_small slds-text-color_error">A {!v.fileName} </div>

    FILE TEXT:
    {!v.jsonFileText} 
</aura:application>

Controller code:

({
    handleFilesChange : function(component, event, helper) {
        var fileName = 'No File Selected..';
        var fileOutput = {};

        if (event.getSource().get("v.files").length > 0) {
            var file = event.getSource().get("v.files")[0];
            fileName = file['name'];
            var reader = new FileReader();
            reader.onload = function(e) {
                var contents = e.target.result;
                fileOutput = JSON.parse(contents);
                //will display the file text in console
                //
                console.log(fileOutput);
                component.set('v.jsonFileText', JSON.stringify(fileOutput)); 
                component.set("v.fileName", fileName);
            }
            reader.readAsText(file);



        }
    }
})

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.