Dropzone.js in XPages: it doesn’t get easier than this

After reading this question on StackOverflow by Daniele Grillo I decided to have a quick shot myself at integrating dropzone.js with XPages. Daniele already gave the solution to his issue himself (no bonus points for me today), but maybe others can benefit from a full example.

Source | Database

dropzone-logo

Dropzone.js is a JavaScript library that allows you to easily add a drop area to your web page where users can drop files. Files dropped there are automatically uploaded to the server. Integration is really simple: add the Dropzone JS file to your XPage (I’ve also included a Dropzone sample CSS file from their demo page for some styling), create an XPage and accompanying Java class to handle the uploaded files (see here), and write some JavaScript to enable and configure the dropzone:

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
Dropzone.autoDiscover = false;

var myDropzone = new Dropzone(".dropzone", {
url: "uploadHandler.xsp",
paramName: "uploadedFile", //used to transfer the file
clickable:true,
uploadMultiple:false,
maxFilesize: 2
});
]]></xp:this.value>
</xp:scriptBlock>

It doesn’t get easier than this!

8 thoughts to “Dropzone.js in XPages: it doesn’t get easier than this”

  3. Hi Mark,

    trying to open the database, it gives me “Invalid nsf version”. Which client should i use?

    1. Hi Andrea,

      I used 9.0.1 (FP4) for the database, but the code itself should work in older versions too.

      The database doesn’t have much code in it, so you could also copy it in from the GitHub repository.

      1. In IE I get the message: Webpage error details:

        User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
        Timestamp: Mon, 30 Nov 2015 21:11:06 UTC

        Message: Object doesn’t support this property or method
        Line: 420
        Char: 9
        Code: 0
        URI: http://dev1/apps/others/xpage/dropzone.nsf/dropzone/dropzone.js

        (I copied the files into a webcontent\dropzone folder)

        Any idea why that is?

Comments are closed.