Upload Button

Uses the HTML5 FileReader API to handle file uploads. Show image uploads immediately to your users, process and handle in the background.

Install

$ bower install upload-button

Usage

Include jQuery and the upload-button script:

<script src="jquery.min.js"></script>
<script src="upload.min.js"></script>

Add a new upload button with unique ID:

<button data-upload-button="foo">Upload</button>

Bind your button to an new instance:

var foo = new UploadButton("foo");

This binds your upload button your new instance (referenced uniquely via the first param, foo).

Try it

Click on your button; select a file, and log the results:

foo.event.on("ready", function(event, upload){
  console.log(upload.id);
  console.log(upload.result);
});

Assuming you're dealing with images, show instant feedback to your user:

foo.event.on("ready", function(event, upload){
  $('#foo').attr('src', upload.result);
});

Process Uploads

To pass the local file on to a server for processing, include a path as the second param:

var foo = new UploadButton("foo", "http://127.0.0.1/upload");

The script will run a POST request to the specified path with body param file. See event.on("complete") for passing back data from the server (such as a CDN URL where the image has been stored).

Events

event.on("ready")

Fires when the local file has read.

foo.event.on("ready", function(event, upload){
  // upload.result
});

event.on("complete")

Fires with successful response from a server upload.

foo.event.on("complete", function(event, upload){
  // upload.result
});

event.on("error")

Fires on any error encountered; namely, a bad file upload.

foo.event.on("error", function(event, upload){
  // upload.error
});