tmont / jquery-file-input

Fancily styled file inputs bundled as a jQuery plugin

File inputs restyled

Fancy styled file upload inputs. In a tiny jQuery plugin.

Also supports image uploads with easy previews with very little extra work. But if you don't want that, you can rip out about half of the code to make it even smaller.

Works in Firefox, Chrome, and maybe IE9, if I get around to testing it.

Demo

Go here. View source to... uh... view the source.

Installation

Reference jquery.file-input.js somewhere on your page.

Usage

Assuming you have some HTML like this:

<div id="file-input">Upload a file!</div>

You can simply do this:

$('#file-input').fileInput();

For image previews, you can do something like this (also see demo.html for examples):

//All options are optional. heh.
var options = {
	resize: 10 * 1024, //resize images using a canvas element until they're under 10KB
	quality: 0.6, //JPEG compression, defaults to 0.8
	decode: true //use window.atob to base64 decode before checking size
};

$('#file-input').imagePreviewInput(options).on('change', function(e, base64Data) {
	$('<img/>').attr('src', base64Data).appendTo('body');
});

The decode option also accepts a base64 decode function, if you want to supply your own because your browser sucks.

To get a hold of the file, do this:

$('#file-input').fileInput().on('change', function(e, files) {
	files.forEach(console.log);
});

License

MIT. Whatever.

Development

git clone [e-mail]:tmont/jquery-file-input.git
cd jquery-file-input
npm install
npm start

And then open http://localhost:9876/demo.html in a browser.