Wednesday, 30 August 2017

Using Dropify in XPages - Override Your Input Files with Style


For a single FileUpload Control in one of my XPages applications I was looking for a simple plugin to override the default style. In my search I came accross a relative new plugin, Dropify - Override your input files with style. jQuery is required to do the magic.
In order to use Dropify, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: Dropify.

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 dropify has been added in the WebContent Folder.
Next the JavaScript and CSS files, dropify.js and dropify.css must be included on the XPage or Custom Control. In this example I add the files to an XPage.

<script type="text/javascript" src="dropify/js/dropify.js"></script>
<link rel="stylesheet" href="dropify/css/dropify.css" />

AMD Loader Fix
For using Dropify in XPages there is a need for an AMD Loader Fix. Reason: newer jQuery plugins try to use its AMD loader, but that doesn't play well with the Dojo implementation in XPages. In the example below I use two javascript libraries, disable_amd.js and enable_amd.js, a solution provided by Mark Leussink. You can add these scripts to in the Script Libraries of the XPages application.

disable_amd.js
if (typeof define === 'function' && define.amd) {if(define.amd.vendor =='dojotoolkit.org'){define._amd = define.amd;delete define.amd;}}

enable_amd.js
if (typeof define === 'function' && define._amd) {define.amd = define._amd; delete define._amd;}

The first one is loaded before the js files, the second one after the js files.

<script type="text/javascript" src="disable_amd.js" clientSide="true"></script>
<script type="text/javascript" src="dropify/js/dropify.js"></script>
<script type="text/javascript" src="enable_amd.js" clientSide="true"></script>

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

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. See also the blog post by Csaba Kiss, x$ selector problem with JQuery 3.
The script itself can be made up as follows. In this example I use a few standard options.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:fileUpload1}" ).dropify({
messages: {
'default': 'Drag and drop a file here or click',
'replace': 'Drag and drop or click to replace',
'remove':  'Remove',
'error':   'Ooops, something wrong happended.'
}
});    
})
]]></xp:this.value>
</xp:scriptBlock>

Final Result
The final result is a responsive FileUploadControl with some additional options 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.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type="text/javascript" src="dropify/js/dropify.js"></script>
<link rel="stylesheet" href="dropify/css/dropify.css" />
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:fileUpload1}" ).dropify({
messages: {
'default': 'Drag and drop a file here or click',
'replace': 'Drag and drop or click to replace',
'remove':  'Remove',
'error':   'Ooops, something wrong happended.'
}
});    
})
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<div class="col-md-7">
<h3>Dropify</h3>
<h5>
Override your input files with style! jQuery is required to do the magic.
</h5>
</div>
<div class="col-md-7">
<xp:fileUpload id="fileUpload1"></xp:fileUpload>
</div>
<xp:br></xp:br>
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

More information: Dropify documentation and examples

1 comment:

  1. thanks for sharing, i will try this for my next project.

    ReplyDelete