Friday, 19 September 2014

Using FileInput in XPages

In this blog post I try to give a basic idea about how the Bootstrap FileInput plugin can be used in an XPages application.
This plugin enhances the HTML 5 file input for Bootstrap 3.x into an advanced widget with file preview for images and text, multiple selection, videos and more.
The plugin enhances these concepts and simplifies the widget initialization with simple HTML markup on a file input.
It also offers support for multiple file preview and previewing a wide variety of files (i.e. images, text, flash, and video file types).

With release v2.3.0, the plugin now supports preview of flash and video files. Flash preview will require Shockwave flash to be installed and supported by the client browser.
The flash preview however only works successfully with webkit browsers due to its unique local url creation support. Videos are however supported by all modern browsers that support the HTML5 video tag.
Note that browsers have limited number of video formats supported by the HTML5 video element (e.g. mp4, webm, ogg).
The size of video files are recommended to be small (controlled through maxFileSize property) for not affecting your browser preview performance.

1. Download Bootstrap FileInput and add the files to the XPages Application
You can download the Bootstrap FileInput file from GitHub : FileInput

Add the extracted files to the WebContent Folder (Package Explorer).



2 .Include fileinput.min.css and fileinput.min.js. on your XPage
The file / stylesheet  fileinput.min.css and  fileinput.min.js.  needs to be included on the XPage or Application (Theme).
In this example I added the files directly to the XPage.
Note: In this example I use the OpenNTF Bootstrap4XPages plugin so the bootstrap files do not need to be added to the XPages separately.

<script src="fileinput/js/fileinput.min.js"type="text/javascript"></script>
<link href="fileinput/css/fileinput.min.css" media="all"rel="stylesheet" type="text/css"/>

4. Using Bootstrap FileInput
First we have to initialize the plugin on the XPage.

<xp:scriptBlock id="scriptBlockInitFile">
<xp:this.value>
<![CDATA[
           $(document).ready(
               function() {
                   $('input[type=file]').fileinput();;
               }
           );
        ]]>
</xp:this.value>
</xp:scriptBlock>

The plugin will automatically convert fields of [input type="file"] to a file input control, if you attach a css class file to the input.

- Create a new XPage
- On the XPage add a File Upload Control



<xp:fileUpload id="fileUpload1"
value="#{document1.fileAttachment}">
</xp:fileUpload>

The result is a  good looking Bootstrap style file upload control.


5. Customization
It is possible to customize the FileInput with a lot of properties / attributes.
For example, show only image for selection & preview and control button labels, styles and icons for the browse, upload, and remove buttons.

<xp:scriptBlock id="scriptBlockInitFile">
<xp:this.value>
<![CDATA[
           $(document).ready(
               function() {
                   $('input[type=file]').fileinput({
previewFileType: "image",
browseClass: "btn btn-primary",
browseLabel: "Browse",
browseIcon: '<i class="glyphicon glyphicon-plus"></i>',
removeClass: "btn btn-danger",
removeLabel: "Delete",
removeIcon: '<i class="glyphicon glyphicon-trash"></i>',
uploadClass: "btn btn-info",
uploadLabel: "Upload",
uploadIcon: '<i class="glyphicon glyphicon-upload"></i>',
});
               }
           );
        ]]>
</xp:this.value>
</xp:scriptBlock>

Note: In this example you have to add the attribute 'accept' to the File Upload Control to show only images for selection and preview.

<xp:this.attrs>
<xp:attr name="accept" value="image/*" />
</xp:this.attrs>





It is also possible to upload (save) the uploaded file directly, in edit mode,  without having to save the document first.




















Sample Code XPage FileInput

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:this.data>
<xp:dominoDocument var="document1" formName="Contact"></xp:dominoDocument>
</xp:this.data>

<script src="fileinput/js/fileinput.min.js"
type="text/javascript">
</script>
<link href="fileinput/css/fileinput.min.css" media="all"
rel="stylesheet" type="text/css" />

<xp:scriptBlock id="scriptBlockInitFile">
<xp:this.value>
<![CDATA[
           $(document).ready(
               function() {
                   $('input[type=file]').fileinput({
previewFileType: "image",
browseClass: "btn btn-primary",
browseLabel: "Browse",
browseIcon: '<i class="glyphicon glyphicon-upload"></i>',
removeClass: "btn btn-danger",
removeLabel: "Delete",
removeIcon: '<i class="glyphicon glyphicon-trash"></i>',
uploadClass: "btn btn-info",
uploadLabel: "Upload",
uploadIcon: '<i class="glyphicon glyphicon-upload"></i>',
});
               }
           );
        ]]>
</xp:this.value>
</xp:scriptBlock>      
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div class="page-header">
<h1>
FileInput
<xp:span style="color:rgb(255,255,255)">
</xp:span>
<small>Bootstrap plugin</small>
</h1>
</div>
<xp:inputText id="inputText1"
value="#{document1.Company}">
</xp:inputText>
<xp:br></xp:br>
<xp:fileUpload id="fileUpload1"
value="#{document1.fileAttachment}">
<xp:this.attrs>
<xp:attr name="multiple" value="true" />
</xp:this.attrs>
<xp:this.attrs>
<xp:attr name="accept" value="image/*" />
</xp:this.attrs>
</xp:fileUpload>
<xp:br></xp:br>
<xp:fileDownload rows="30" id="fileDownload1"
displayLastModified="true" value="#{document1.fileAttachment}" hideWhen="true" allowDelete="true">
</xp:fileDownload>
<xp:br></xp:br>
<xp:button value="Save Document" id="button1"
styleClass="btn btn-primary">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action>
<xp:actionGroup>
<xp:saveDocument></xp:saveDocument>
<xp:openPage name="/FileInput.xsp"></xp:openPage>
</xp:actionGroup>
</xp:this.action>
</xp:eventHandler>
</xp:button>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

For more information about all properties / attributes : Bootstrap File Input

In one of the next blog post I will discuss other possibilities for uploading files with Bootstrap.

2 comments: