2

Component

<input onchange="{! c.readCSV}" accept=".csv" type="file" id="file-upload"  aura:id="file-upload"/>

Controller

readCSV : function(component, event, helper){
var file = component.find("file-upload").getElement().files[0];//Violation in security review
/* all file processing takes place */

//now i need to empty the file (on change event wont be fired if the same file is uploaded twice)

component.find("file-upload").getElement().value = ""; //Violation in security review

}

The above code works well but violates DOM Modification . is ther any way to empty the values?

0

If you are manipulating the DOM the framework manages for you, then it should happen in the Renderer.

Inorder to access input[type=file] element in Renderer you need to do below:

1) Have an aura:attribute of type boolean, which will be set when onchange of the input[type=file] element is fired

2) Once the aura:attribute is set to true(i.e changed), rerender of the component will be fired

3) In rerender, empty the input[type=file] element's value and make sure aura:attribute is set to false at end

With that said, I'm not sure why retrieving the file content by accessing the Input File element is being flag by the Security Review Team, since there's no DOM Manipulation is done. Please reach out to the Partner Community, the Security Team members over there might help you out on this.

To access the file content, you can do in the Renderer as well. Check the below sample code:

myApp.app

<aura:application extends="force:slds">
    <aura:attribute name="isFileChanged" type="Boolean" default="false" access="private"/>    
    <input onchange="{!c.readFile}" accept=".csv" type="file" id="file-upload"  aura:id="file-upload"/>

</aura:application>

controller

({
    readFile : function(component, event, helper) {
        component.set("v.isFileChanged" , true);
    }
})

Renderer

({
    // Your renderer method overrides go here
    rerender : function(component, helper) {
        this.superRerender();
        console.log('rerender called')
        if(component.get("v.isFileChanged")) {
            var fileEle = component.find("file-upload").getElement();
            var file = fileEle.files[0];

            /*
             * call helper logic to process file
             * 
             */

            fileEle.value = "";
            component.set("v.isFileChanged" , false);
        }
    }
})

NOTE : Since rerender is fired multiple times in the LC's lifecycle be cautious while using it.

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.