title: How to make a nicer file upload control in XPages
body: <p>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.</p>
  
  <p>How can I get hold of the filename the user selected before submitting the form?</p>
  
  <p><a href="https://i.stack.imgur.com/g8BBw.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g8BBw.jpg" alt="enter image description here"></a>
  XSP</p>
  
  <pre><code> &lt;xp:view xmlns:xp="http://www.ibm.com/xsp/core"&gt;
      &lt;xp:label id="label2" for="fileUpload1"&gt;
          &lt;i class="fa fa-image"&gt;&lt;/i&gt;
          &amp;#160;
          &lt;i class="fa fa-paperclip"&gt;&lt;/i&gt;
          &lt;xp:fileUpload id="fileUpload1" value="#{newtopic.Body}"
              style="display:none"&gt;
          &lt;/xp:fileUpload&gt;
      &lt;/xp:label&gt;
   &lt;/xp:view&gt;
  </code></pre>
  
  <p>Also tried the following</p>
  
  <pre><code>var fileUpload1:com.ibm.xsp.component.xp.XspFileUpload = getComponent("fileUpload1");
  getComponent("computedField1").setValue("FN= " + fileUpload1.getFilename())
  </code></pre>