Introduction

Jumploader is a powerful file uploading tool that can be embedded in web pages. Technically it's a java applet whose behaviour can be controlled by a rich Javascript API (Check the Javascript Demos on Jumploader.com to get an impression). The only downside is that this API is a bit lengthy, so I decided to create JL.js to make scripting Jumploader more comfortable.

This documentation is quite minimalistic at the moment, but I hope I can improve it soon.

Status & Installation

JL.js status

JL.js is pre-alpha and shouldn't be used in production environments. It lacks cross-browser tests and its interface is subject to change.

How to get and use JL.js

Please visit the Source Tab and checkout a copy of JL.js (hint: if you don't know what svn is, you can directly copy'n'paste the most recent version from here)

Create a new HTML page with a SCRIPT-Tag in the HEAD. Paste the JL.js code directly into the SCRIPT-Tag, DO NOT link an external .js File (this can cause problems with the Event Handlers). Note: maybe it's just necessary to copy the Jumploader callback functions to the main file (=all functions before the JL object), but I need to investigate that.

Last but not least you also need a copy of the jumploader applet.

Here is the structure of a minimalistic Jumploader/JL.js HTML file:

<html>
<head>
<script type="text/javascript">
function uploaderFilesReset( uploader ) {return JL.onreset(uploader)}
//followed by the other ~300 lines of JL.js sourcecode
//...


//your code starts here
JL.onload = function (){

}
</script>
</head>
<body>
 <applet id="jumploader" name="jumpLoaderApplet" code="jmaster.jumploader.app.JumpLoaderApplet.class" archive ="path/to/your/jumploader.jar" width="715" height="500" mayscript>
<!--You only need to configure applet and view parameters here. All upload parameters can be configured more comfortably with JL.js (see below) -->
        <param name="ac_fireAppletInitialized" value="true"/>
        <param name="ac_fireUploaderFileAdded" value="true"/>
        <param name="ac_fireUploaderFileReset" value="true"/>
        <param name="ac_fireUploaderFileRemoved" value="true"/>
        <param name="ac_fireUploaderSelectionChanged " value="true"/>
        <param name="ac_fireUploaderFileStatusChanged" value="true"/>
        <param name="ac_fireUploaderStatusChanged" value="true"/>
</applet>
</body>
</html>

JLjs Interface

Configuring Upload Parameters

JL.js provides a quick and flexible way to configure upload parameters:

 var url = JL.upload.params ('uploadUrl'); //retrieves value of uploadUrl parameter
 JL.upload.params ('uploadUrl','partitionedUploader.php'); //set value for uploadUrl
 //supply a Javascript object with all upload parameters you want to configure
 JL.upload.params ({
            'uploadScaledImages': true,
            'scaledInstanceNames': "thumb,small,medium,big,xl",
            'scaledInstanceDimensions': "160x160,250x250,640x640,1024x1024,1600x1600",
            'scaledInstanceQualityFactors':'900,900,900,900,900'
        });
 //retrieve the values of multiple parameters at once by using an array
 JL.upload.params(['uploadScaledImages','scaledInstanceNames']); //[true,"thumb,small,medium,big,xl"]

Upload Attributes

allow you to add custom variables that are sent to the server with each uploaded file.

JL.upload.set_attr('browser': navigator.userAgent); //set attribute browser
JL.upload.get_attr('browser'); //retrieve value of attribute browser

Adding and Handling files

JL.upload.add('home/myusername/pics'); //add all files from this directory to jumploader
JL.upload.add(['home/myusername/pics/01.jpg','home/myusername/files']); //add array of multiple paths at once
JL.upload.files() //returns count of added files
var firstfile = JL.upload.files(0) //returns the first added file

File Information

JL.file.get_info(firstfile); //{'filename': '01.jpg','path': 'home/myusername/pics', 'extension': 'jpg', 'length': 1827391}
JL.file.is_video(firstfile); //false
JL.file.is_image(firstfile); //true
JL.file.is_document(firstfile); //true
JL.file.estimate_upload_size(firstfile); // 1736022 bytes (estimation depends on filetype and whether zipped compression or image scaling was turned on)

Event Handlers

JL.onload = function () {alert("I'm fired when Jumploader was initialized");}
JL.upload.onstart = function (uploader) {alert ("I'm fired before the upload starts");}
JL.upload.onstop = function (uploader) {alert ("I'm fired when the upload is stopped");}
JL.upload.onerror = function (uploader) {alert ("Oops... something went wrong with your upload");}
JL.file.onremove = function (uploader, file){alert("I'm fired when a file is removed");}
JL.file.onadd = function (uploader, file){alert("I'm fired when a file is added");}

Actions

bind Jumploader commands to HTML Elements (buttons etc).

<button onclick="JL.actions.start_upload()">Upload Files!</button>
<button onclick="JL.actions.stop_upload()">Stop Upload</button>
<button onclick="JL.actions.remove_files()">Remove added Files</button>

Auto-Widgets (Coming soon)

"wire" HTML Elements automatically with Jumploader (no "onclick" code needed). You only need to set the id Attribute of the Element to a certain value. The nice thing about Auto-Widgets: JLjs controls their state automatically, e.g. the "Stop Upload"-Button is deactivated when no upload is happening.

<html>
<head>
<script type="text/javascript">
//your code starts here
JL.onload = function (){
 JL.auto_widgets();
}
</script>
</head>
<body>
 <applet id="jumploader" name="jumpLoaderApplet" code="jmaster.jumploader.app.JumpLoaderApplet.class" archive ="path/to/your/jumploader.jar" width="715" height="500" mayscript>
<!--params omitted -->
</applet>
<!--This button will have the start_upload functionality -->
<button id="JL_start_upload">Start Upload</button>
<!--This button will have the stop_upload functionality -->
<button id="JL_stop_upload">Stop Upload</button>
<!--This textarea will become a log box -->
<textarea id="JL_log">All JLjs log messages will automatically go here...</textarea>
</body>
</html>

Comment by mdc...@gmail.com, Feb 10, 2009

Is there enough of the Jumploader API exposed that you could hide the jumploader gui altogether and replace it with HTML/css elements?

► Sign in to add a comment