A tiny, dependency-free, highly customizable and configurable, easy to use file input with some pretty sweet features.
A tiny, dependency-free, highly customizable and configurable, easy to use file input with some pretty sweet features.
filebokz elementsfile input, so they are submitted with your form and AJAX isn't required (however you can definitely use it if you wish) Edge |  Firefox |  Chrome |  Safari |  iOS Safari |  Samsung |  Opera |
|---|---|---|---|---|---|---|
| >=80 | >=50 | >=58 | >=11 | Yes* | Yes* | >=45 |
*Not really sure about which exact versions that are supported currently
Basically any browser version made after 2016 should work.
Visit https://filebokz.js.org
Download the latest version of filebokz and then place the following HTML in your page's head element:
<script type="text/javascript" src="dist/filebokz.min.js"></script>
<link rel="stylesheet" href="dist/filebokz.min.css" />
<!--Optional theme-->
<link rel="stylesheet" href="dist/filebokz-theme.min.css" />
Place the following HTML in your page's head element (check to make sure the version in the URLs are the version you want):
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/kodie/filebokz@0.0.2/dist/filebokz.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kodie/filebokz@0.0.2/dist/filebokz.min.css" />
<!--Optional theme-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kodie/filebokz@0.0.2/dist/filebokz-theme.min.css" />
npm install filebokz --save
// ES6
import filebokz from 'filebokz'
// CommonJS
const filebokz = require('filebokz')
gpm install kodie/filebokz --save
bower install kodie/filebokz --save
<div class="filebokz">
<input type="file" name="my-file" />
<label for="my-file">
<strong class="no-files">Choose a file</strong>
<span class="no-files is-draggable">or drag it here</span>
<span class="files"></span>
<span class="error-msg"></span>
</label>
</div>
filebokz([elements], [applyClass]) FunctionInitiates filebokz.
document.querySelectorAll(), a NodeList instance, or an HTMLElement instance. (Defaults to .filebokz)false to not apply any class. (Defaults to filebokz)window.addEventListener('load', function () {
filebokz()
filebokz('.custom-filebokz', false)
filebokz(document.getElementById('my-filebokz'))
filebokz(document.getElementsByClassName('file-upload'))
})
Use these classes on elements inside of the filebokz element to customize your input.
Elements with this class will be hidden unless the root filebokz element has this class which is added if any errors occur.
Elements with this class will have their contents replaced with any errors that occur.
If any elements have the files class, elements are appended to them with this class for displaying file names and/or previews when files are added to the input.
Elements with this class will have their contents replaced with the number of files in the input.
Elements with this class will have elements appended to them with the file class for displaying file names and/or previews when files are added to the input.
If displaying file previews, apply this class to any elements with the files class for fancier styling (when filebokz-theme.css is used).
Elements with this class will be hidden unless the root filebokz element has this class which is added if the input has files.
Elements with this class will be hidden unless the root filebokz element has this class which is added if the input is in focus.
Elements with this class will be hidden unless the root filebokz element has this class which is added if the browser supports advanced features.
Elements with this class will be hidden unless the root filebokz element has this class which is added if the browser supports drag-and-drop.
Elements with this class will be hidden unless the root filebokz element has this class which is added if a file is being dragged over it.
Elements with this class will be hidden unless the root filebokz element has this class which is added if a file is being dragged out of the file box and being removed.
Elements with this class will be hidden unless the root filebokz element has this class which is added if a file is being dragged out of the file box and being moved to another filebokz element.
Elements with this class will be hidden unless the root filebokz element has this class which is added after the JavaScript has been ran (thus meaning the browser supports JavaScript).
Elements with this class will be hidden if the root filebokz element has the class has-files which is added if the input has files.
Add this class to your root filebokz element if you do not wish for the JavaScript to do anything with it (mainly used for demo purposes).
Elements with this class will be hidden if the root filebokz element has the in-focus class which is added if the input is in focus.
Elements with this class will be hidden if the root filebokz element has the is-advanced class which is added if the browser supports advanced features.
Elements with this class will be hidden if the root filebokz element has the is-draggable class which is added if the browser supports drag-and-drop.
Elements with this class will be hidden if the root filebokz element has the is-dragging class which is added if a file is being dragged over it.
Elements with this class will be hidden if the root filebokz element has the is-removing class which is added if a file is being dragged out of the file box and being removed.
Elements with this class will be hidden if the root filebokz element has the is-transferring class which is added if a file is being dragged out of the file box and being moved to another filebokz element.
Add this class to an element inside of the files element's content, content-before, or content-after data attributes so that when the element is clicked, it removes the file from the input.
Elements with this class will have their contents replaced with the combined file size of all files in the input.
Apply these attributes with the data- prefix to your filebokz element to configure your input. (ex. data-max-file-size="5120")
A comma seperated (no spaces) list of allowed file extensions. Defaults to allowing any file extension. Add [none] to this list to allow files without extensions.
The error message that is displayed when a user tries to upload a file that isn't in the allowed-extensions list. Any instances of {variable} will be replaced with the list of allowed file extensions. (Defaults to Only the following file types are allowed: {variable}.)
Set this to false to replace the files in the input when a file is selected rather than adding it. (Defaults to true)
Set this to true to automatically submit the parent form when a file is uploaded. (Defaults to false)
The number of milliseconds after the error-display-duration before clearing out the contents of the error-msg element after an error has occurred. (Defaults to 250)
The number of milliseconds before removing the error class from the filebokz after an error has occurred. (Defaults to 3000)
The maximum number of files that are allowed to be uploaded. This is only applied if the input has the multiple attribute. (Defaults to null [no limit])
The error message that is displayed when a user tries to upload more files than max-files allows. Instances of {variable} are replaced with the value of max-files and instances of {s} are replaced with an "s" if that number is more than 1, otherwise it is replaced with nothing. (Defaults to A maximum of {variable} file{s} can be uploaded.)
The maximum size of a single file that is allowed to be uploaded. (Defaults to null [no limit])
The error message that is displayed when a user tries to upload a file that is bigger than what max-file-size allows. Instances of {variable} are replaced with the value of max-file-size. (Defaults to File size cannot exceed {variable}.)
The maximum size of all files combined that is allowed to be uploaded. (Defaults to null [no limit])
The error message that is displayed when a user tries to upload files whose combined file size is bigger than what max-size allows. (Defaults to Total combined file size cannot exceed {variable}.)
Apply these attributes with the data- prefix to any element with the files class inside of your filebokz element to customize how each file is displayed.
These attributes (with the exception of draggable) can have a MIME type appended to them with any + or / symbols swapped out for - to customize how a specific file type is displayed (ex. content-before-image or even more specifically: content-before-image-svg-xml).
These attributes (with the exception of draggable and element) will have the following replaced with information about each file:
{name} - The file name.{size} - The file size (in a human readable format).{type} - The MIME type of the file.{url} - If the file is an image, this will be a temporary URL to the file for previewing, otherwise it will be the contents of the data-url attribute, and if that doesn't exist, this will be blank.The content that is placed inside of the file element. (Defaults to {name})
The content that is prepended to content. (Defaults to null [blank])
The content that is appended to content. (Defaults to null [blank])
Set this to false to disable the dragging of file elements. (Defaults to true)
The type of HTML element that the file element should be. (Defaults to span)
The URL of the file preview. This is what {url} is set to in the content, content-before, and content-after attributes. (Defaults to null [blank] unless the file is an image, in which case it is set to a temporary URL of the file for previewing.)
The file-added, file-removed, and error events are fired to the containing filebokz element when described events happen.
var fileElement = document.querySelector('.filebokz')
fileElement.addEventListener('file-added', function (e) {
console.log('A file was added')
})
fileElement.addEventListener('file-removed', function (e) {
console.log('A file was removed')
})
fileElement.addEventListener('error', function (e) {
console.log('An error occured', e.errorType, e.errorMessage)
})
colorfield - A tiny, dependency-free, color input field helper that utilizes the native color picker.
hashjump - A tiny, dependency-free JavaScript module for handling anchor links and scrolling elements into view.
kloner - A tiny, dependency-free JavaScript module for cloning/repeating elements.
minitaur - The ultimate, dependency-free, easy to use, JavaScript plugin for creating and managing modals.
vanishing-fields - A dependency-free, easy to use, JavaScript plugin for hiding and showing fields.
MIT. See the license file for more info.
FAQs
A tiny, dependency-free, highly customizable and configurable, easy to use file input with some pretty sweet features.
The npm package filebokz receives a total of 5 weekly downloads. As such, filebokz popularity was classified as not popular.
We found that filebokz demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.