Uploader

Uploader is a simple form uploading progress widget for RightJS

Get the latest version right here

right-uploader.js - minified version
right-uploader-src.js - source code

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

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!");
  }
});

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

Name	Default	Description
url	‘/progress’	Url where to ask for the uploading status
param	‘X-Progress-ID’	The uploading ID parameter name
timeout	1000	Timeout in ms between status updates
round	0	How many numbers after coma should be left
fxDuration	400	The 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

Name	Description
start	when uploading is started
update	when a status update was received
finish	when uploading is successfully finished
error	when 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.

Get it!