Better File Input Replacement

A dead simple JavaScript plugin called ‘Better File Input’ that turns a standard file input into a pretty nice drag & drop zone with file list support.

How to use it:

Install the library with NPM.

# NPM
$ npm install better-file-input --save

Import the library into the document.

<script src="dist/bfi.min.js"></script>

Add the CSS class ‘bfi’ to the regular file input. Done.

<input type="file" class="bfi">

The library also supports multiple file input.

<input type="file" class="bfi" multiple>