On my current XPages project, I use bootstrap, as I wrote in my previous blog item.
In the end I ended up with not so pretty file upload control on, so after some searching I found a very neat example.
It require only an element around your file upload control, some CSS and a few lines of JQuery code to make it pretty.
[dropshadowbox align=”none” effect=”lifted-both” width=”400px” height=”” background_color=”#ffffff” border_width=”1″ border_color=”#dddddd” ]
Bootstrap UI for XPages File Upload
[/dropshadowbox]
To make all this happen I created a custom control with custom properties, so I can reuse the code.
[dropshadowbox align=”none” effect=”lifted-both” width=”600px” height=”” background_color=”#ffffff” border_width=”1″ border_color=”#dddddd” ]
Custom Control File Upload Bootstrap UI
[/dropshadowbox]
As you can I added a input field just before the closing tag of the panel. It is just for displaying the filename.
Another thing I will point out is that I put a computed text component inside the File Upload Control tags. This computed text only purpose is to get from my property file the text for the button inside the file upload control, in my case ‘Browse’.