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