How to make a nicer file upload control in XPages

I am trying to make nicer upload control by hiding the ugly file upload button. Using the code below I managed to hide the file upload control and provide a link the user can click on, works great! but I also need to inform the user that a file have been selected.

How can I get hold of the filename the user selected before submitting the form?

XSP

 <xp:view xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:label id="label2" for="fileUpload1">
        <i class="fa fa-image"></i>
        &#160;
        <i class="fa fa-paperclip"></i>
        <xp:fileUpload id="fileUpload1" value="#{newtopic.Body}"
            style="display:none">
        </xp:fileUpload>
    </xp:label>
 </xp:view>

Also tried the following

var fileUpload1:com.ibm.xsp.component.xp.XspFileUpload = getComponent("fileUpload1");
getComponent("computedField1").setValue("FN= " + fileUpload1.getFilename())

On the client-side you can get the name of the file selected for uploading by adding an onchange handler to the input element:

var eInput=document.getElementById("idOfInputControl");
eInput.addEventListener("change",function(){
    var i,filename,files;
    files=this.files;
    for (i=0;i<files.length;i++) {
        filename=files[i].name;
        // do whatever you want with the filename
    }
})