Skip to content

Latest commit

 

History

History
67 lines (58 loc) · 2.49 KB

README.md

File metadata and controls

67 lines (58 loc) · 2.49 KB
Raw

Better File Input

A lightweight vanilla JavaScript library that converts HTML File Inputs into user-friendly, interactive elements with minimal setup required

GitHub npm

Demo

View the live demo here

Installation

CDN

Add the following to the <head> of your document:

<script src="https://unpkg.com/better-file-input"></script>

npm

  1. Install better-file-input with the following command:
npm i better-file-input
  1. Add the following to the <head> of your document:
<script src="./node_modules/better-file-input/dist/bfi.js"></script>

Manual

  1. Download dist/bfi.js (or dist/bfi.min.js)
  2. Add the following to the <head> of your document:
<script src="relative/path/to/bfi.js"></script>

Usage

Simply add class="bfi" to your file inputs to automatically convert them to better file inputs:

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

Note: You can also add the multiple and disabled attributes to your better file inputs

Dynamically-created file inputs will not be automatically converted - you need to call bfi_init() after creation to convert them:

bfi_init()

You can call bfi_clear() to programmatically remove files from a converted file input:

bfi_clear()                 // Clear all better file inputs
bfi_clear('#myFileInput')   // Clear the better file input with the id 'myFileInput'

Customization

The bfi_init() function accepts one optional argument - an object containing pre-defined options to customize the look of your better file inputs:

bfi_init({
  'containerColor': '#b8bfd8',                        // The color of the file container
  'labelColor': 'rgb(77, 79, 86)',                    // The color of the file container label
  'fileColor': 'linear-gradient(#84f189, #53b658)',   // The color of the files
  'fileNameColor': 'darkblue',                        // The color of the file names
  'fileInfoColor': 'rgba(55, 55, 55, 0.75)',          // The color of the file size info
  'dragDropBorder': '3px dotted #374f6d'              // The drag & drop border
})

To reset the look of your better file inputs, simply call the bfi_reset() function:

bfi_reset()