About

Compatibility

The plugin is Web only as it uses functionalities only available in a browser (Wicket ajax callbacks).
It has been tested with Servoy 6.0.x and 6.1.x

It works in all modern browsers. The precise list of compatible features per browsers can be find at
https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support

The recommended browsers to use are Firefox 4+, Google Chrome and Safari 5+ (on Mac OS X).
Internet Explorer 8+ is usable, but without drag and drop support unless using the Google Chrome Frame.

NB The plugin behavior is not compatible with servoy.webclient.nice.urls. You must set this option to false in servoy-admin for the plugin to work reliably.

Installation

  1. Get the distribution zip from the Files section
  2. unzip on your hard disk, you will find 2 folders:
    • plugins: the content of which is to be placed into your SERVOY/application_server/plugins folder
    • server/webapps/ROOT/: the jqfu folder is to be placed inside your SERVOY/application_server/server/webapps/ROOT/ folder
      (optionally you can unzip inside SERVOY/application_server and the files will be placed at the correct location when unzipped)
  3. Restart Servoy, set the server plugins properties in the servoy-admin/plugin-settings page, and use the MultiFileUploader plugin methods in Developer...

Server plugin properties

  • multifileuploader.rootfolder: the server side absolute path where the files are going to be saved - default = System.getProperty('user.home') + '/uploads/'
  • multifileuploader.imagesize: the size of the preview images - default = pixels
  • multifileuploader.accept: a comma separated list of file extensions to accept (for example "png,jpg,jpeg,gif" to accept only images) - default = null = any files
  • multifileuploader.maxuploadsize: the maximum size for files (in bytes) - default = null = no limit
  • multifileuploader.deleteonexit: a boolean to set the files uploaded to be deleted on stop of the server - default = false

Plugin methods

callMultiUpload()

Signature:
void callMultiUpload(Function callbackFunction, [String relativePath], [JSObject windowOpenParameters])

Calls the multi upload html page in a separate window.
Example:

    plugins.MultiFileUploader.callMultiUpload( filesReceived );
    // plugins.MultiFileUploader.callMultiUpload( filesReceived, '/subfolder/' );
    // plugins.MultiFileUploader.callMultiUpload( filesReceived, '/subfolder/', { width: 600, height: 500, resizable: 0 } );
    // plugins.MultiFileUploader.callMultiUpload( filesReceived, { width: 600, height: 500, resizable: 0 } );

A callback function must be provided, that will be called upon click on the "Done" button with a JSFile[] of successfully uploaded on the server.

The callback function will look like this:

/**
 * @param {plugins.file.JSFile[]} files
 */
function filesReceived(files) {
    if (files) {
        // do something with the files
    }
}

A relative path can be provided to save files in a subfolder, relative to the root upload folder, for example "/a/sub/folder/path"

An optional object can also be provided to set the options of the window.open call (see http://www.w3schools.com/jsref/met_win_open.asp for a list of available options specs).
The default is { width: 700, height: 600, location: 0, menubar: 0, resizable: 1, scrollbars: 0, status: 0, toolbar: 0, titlebar: 0}

getUploadFolder()

Signature:
String getUploadFolder()

Returns the server side absolute path where the files will be uploaded

getVersion()

Signature:
String getVersion()

Returns the version of the plugin

Window template customization

You can customize the style of the JQUery-File-Upload page using CSS, right now it is using the Twitter Bootstrap framework but it can be adapted using custom CSS or by changing some of the classes used in the template.

The template used can be found in SERVOY/application_server/server/webapps/ROOT/jqfu/uploader.html
The only thing that needs to be kept intact is the structure of the body, and the scripting, especially in lines 196 to 236, and any places where you have %avariable% placeholders.