Wednesday, 19 October 2016

Using the Updated Bootstrap Fileinput Plugin in XPages Part I - Initial Setup of the Plugin in XPages

In the next blog post I'm going to pay particular attention to the updated Bootstrap File Input Plugin. The plugin is well maintained and is continuously expanded with new functionalities. In this blog post I will describe the initial setup of the plugin in XPages.
The Bootstrap FileInput Plugin is an enhanced HTML 5 file input for Bootstrap 3.x with file preview for various files, offers multiple selection, and more. The plugin allows you a simple way to setup an advanced file picker/upload control built to work specially with Bootstrap CSS3 styles. It enhances the file input functionality further, by offering support to preview a wide variety of files i.e. images, text, html, video, audio, flash, and objects. In addition, it includes AJAX based uploads, dragging and dropping files, viewing upload progress, and selectively previewing, adding, or deleting files.
In order to use the Bootstrap FileInput Plugin, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: Bootstrap-FileInput.

Adding the JS and CSS files
The JavaScript and CSS files must be added to the WebContent Folder in the Package Explorer.
In this example a Folder bootstrapfileinput has been added in the WebContent Folder.


Next the JavaScript and CSS files, fileinput.js and fileinput.css, must be included on the XPage or Custom Control. In this example I add the files to an XPage.
Note: The theme file themes/fa/theme.js can be optionally included for the font awesome icons styling. The locale file <lang>.js can be optionally included for translating for your language if needed. The canvas-to-blob.js file is the source for the JavaScript-Canvas-to-Blob plugin by blueimp. It is required to be loaded before fileinput.js for using the image resize feature of the bootstrap-fileinput plugin. The purify.js file is the source for the DomPurify plugin by cure53. It is required to be loaded before fileinput.js to purify the HTML for HTML content preview.

<link href="bootstrapfileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
<script src="bootstrapfileinput/js/plugins/canvas-to-blob.js" type="text/javascript"></script>
<script src="bootstrapfileinput/js/plugins/purify.js" type="text/javascript"></script>
<script src="bootstrapfileinput/js/fileinput.js"></script>
<script src="bootstrapfileinput/themes/fa/theme.js"></script>
<script src="bootstrapfileinput/js/locales/nl.js"></script>

Adding the x$ jQuery selector for XPages
Furthermore I recommend to use the the great XSnippet by Mark Roden, x$ jQuery selector for XPages, to initialize the plugin. The XSnippet can be added to the Script Libraries.

The script itself can be made up as follows. In this example I use a few Options. In the next few blog posts these options will be explained in more detail.

<xp:scriptBlock id="scriptBlockInitFile">
<xp:this.value>
<![CDATA[
$(document).ready(
function() {
$('input[type=file]').fileinput({
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>

AMD Loader Fixes
Finally, the JavaScript files fileinput.js and purify.js need to be adjusted. Reason: newer jQuery plugins try to use its AMD loader, but that doesn't play well with the Dojo implementation in XPages. The source code of the library can be adjusted in a very simple way with just a slight modification.

1. Go to the WebContent Folder and select the JavaScript file bootstrap-dialog.js
2. Select Open With - Client/Server JS Editor
3. Removed define.amd and replace it with false
4. Save the JavaScript files fileinput.js and purify.js

Note: There are other solutions for the AMD Fix. For more information about thes solution see my blog post Bootstrap Plugins in XPages Part VI - jQuery and JavaScript AMD (Asynchronous Module Definition) Fixes (2).

The final result is a responsive Bootstrap FileUpload with additional functionality in the initial setup.


Code XPage
<?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="Visitors"></xp:dominoDocument>
</xp:this.data>
<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<link href="bootstrapfileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
<script src="bootstrapfileinput/js/plugins/canvas-to-blob.js" type="text/javascript"></script>
<script src="bootstrapfileinput/js/plugins/purify.js" type="text/javascript"></script>
<script src="bootstrapfileinput/js/fileinput.js"></script>
<script src="bootstrapfileinput/themes/gly/theme.js"></script>
<script src="bootstrapfileinput/js/locales/nl.js"></script>
<xp:scriptBlock id="scriptBlockInitFile">
<xp:this.value>
<![CDATA[
$(document).ready(
function() {
$('input[type=file]').fileinput({
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>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<h4>Bootstrap FileInput 4</h4>
<h5>An enhanced HTML 5 file input for Bootstrap 3.x with file preview for various files, offers multiple selection, and more. The plugin allows you a simple way to setup an advanced file picker/upload control built to work specially with Bootstrap CSS3 styles. It enhances the file input functionality further, by offering support to preview a wide variety of files i.e. images, text, html, video, audio, flash, and objects.</h5>
<br />
<br />
<xp:fileUpload id="fileUpload1"
value="#{document1.Attachments}">
<xp:this.attrs>
<xp:attr name="multiple" value="multiple"></xp:attr>
</xp:this.attrs></xp:fileUpload>
<br />
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

In the next blog posts the the additional functionalities of this plugin will be discussed in more detail.

No comments:

Post a Comment