How to make a nicer file upload control in XPages

Question

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())

Answer 1

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
    }
})

Answer 2

Take a look at Twitter Bootstrap File Input. It turns an ordinary file input picker into a nice looking button (with Bootstrap styling): http://gregpike.net/demos/bootstrap-file-input/demo.html . It shows the name of the selected file next to the button or inside the button.

A simple way to use it is to style all file pickers:

$(document).ready( 
    function() {
        // Style the file button
        $('input[type=file]').bootstrapFileInput();
    }
);

Using Javascript you can get hold of the selected file by using the files property. Here's a simple example using jQuery:

var selectedFile = $('input[type=file]').val()

Answer 3

Also check out David Leedy's NotesIn9 which allows multiple files to be uploaded. http://www.notesin9.com/2016/08/25/notesin9-194-upload-files-with-plupload/