Uploader

Uploader is a simple form uploading progress widget for RightJS

Get the latest version right here

All the source code of the project is available under terms of the MIT license

http://github.com/rightjs/rightjs-ui/tree/master/src/uploader/

For some standard usage examples see the demo page

Index

top ↑Features List

  • Super easy usage
  • Pure HTML/CSS based design
  • Everything in a tiny (2.5k) single file

top ↑Server-Side Configuration

This script is designed to work with standard web-server modules, for more information on how to install and configure them, please take a look by the following links

top ↑Usage Basics

The usage of the script is super easy, all you need is to include this script on your page and add the data-uploader HTML5 attribute to your form.

<script src=".../right-uploader.js"></script>

<form data-uploader="" ...>
....
</form>

That’s all it takes. After that the script will automatically build a progress bar widget at the bottom of your form and show it when the form is submitted in any way.

If you need the progress bar to be in any other place on your form or have additional styles, you can create the progress-bar element manually where and how you want it

<form data-uploader="">
<div class="rui-uploader"></div>

<p>
<input type="file" name="picture" />
<input type="submit" value="Send" />
</p>
</form>

You can either create it empty or with some standard content as described in the style alterations section. In any case the script will find it and use as the uploading progress bar widget.

And finally you can create uploaders programmatically by using the Uploader class

var uploader = new Uploader('my-form', {
timeout: 400,
onError: function() {
alert("Oh shizzel!");
}
});

top ↑Options List

There is the following simple list of options, which you can use in any standard for RightJS way: by altering them globally at the Uploader.Options variable, with the Uploader class constructor, or by specifying a custom form element attribute named data-uploader

NameDefaultDescription
url‘/progress’Url where to ask for the uploading status
param‘X-Progress-ID’The uploading ID parameter name
timeout1000Timeout in ms between status updates
round0How many numbers after coma should be left
fxDuration400The status update fx duration. Set to 0 to switch it off
formCssRule‘[data-uploader]’Css-rule that identifies a form with progress bar

top ↑Events List

This script handles the following list of events

NameDescription
startwhen uploading is started
updatewhen a status update was received
finishwhen uploading is successfully finished
errorwhen uploading was interrupted with an error

All listeners will receive an object (hash) of the status data received from the server.

top ↑Style Alterations

Uploader is a really simple widget that has the following structure:

<div class="rui-uploader rui-progress-bar">
<div class="bar"></div>
<div class="num">0%</div>
</div>

If an uploading was interrupted with an error this element will also receive the rui-progress-bar-failed css-class.