A lightweight vanilla JavaScript library that converts HTML File Inputs into user-friendly, interactive elements with minimal setup required
View the live demo here
Add the following to the <head> of your document:
<script src="https://unpkg.com/better-file-input"></script>- Download
dist/bfi.js(ordist/bfi.min.js) - Add the following to the
<head>of your document:
<script src="relative/path/to/bfi.js"></script>- Install better-file-input with the following command:
npm i better-file-input
- Add the following to the
<head>of your document:
<script src="./node_modules/better-file-input/dist/bfi.js"></script>Simply add class="bfi" to your file inputs to automatically convert them to better file inputs:
<input type="file" class="bfi"> <!-- Single file input -->
<input type="file" class="bfi" multiple> <!-- Multiple file input -->
<input type="file" class="bfi" disabled> <!-- Disabled file input -->Dynamically-created file inputs will not be automatically converted - you need to call bfi_init() after creation to convert them:
// Create new file input with the 'bfi' class
let newInput = document.createElement('input')
newInput.type = 'file'
newInput.classList.add('bfi')
document.body.appendChild(newInput)
// Convert newly created file input to a better file input
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'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
})Calling bfi_reset() will reset the styles to their default values