Awesome

Upfile JS

Makes file inputs a pleasure to use with progressive enhancement.

Installation

$ component install pazguille/upfile

See: https://github.com/component/component

Standalone

Also, you can use the standalone version:

<script src="upfile.js"></script>

How-to

First, you should add the CSS file to your markup:

<link rel="stylesheet" href="upfile.css">

You should use the following HTML code on your files inputs:

<div class="upfile">
    <label class="upfile-label" for="demoInputFile">Select files...</label>
    <input id="demoInputFile" class="upfile-button" type="file" name="files[]" multiple>
</div>

Then, you can start to use it and enjoy!

var Upfile = require('upfile');
    inputFile = document.getElementById('demoInputFile'),
    fileUploader = new Upfile(inputFile);

View demo page

API

Upfile(el)

Create a new instance of Upfile.

el: A given HTMLElement file input to create an instance of Upfile.

var upfile = new Upfile(el);

Upfile#enable()

Enables an instance of Upfile.

upfile.enable();

Upfile#disable()

Disables an instance of Upfile.

upfile.disable();

Contact

Guillermo Paz (Frontend developer - JavaScript developer | Web standards lover)
E-mail: guille87paz@gmail.com
Twitter: @pazguille
Web: http://pazguille.me