Tower File Input

This is a simple JavaScript plugin that works as a UI upgrade to the default HTML file input.

Show/Hide Code

<div class="mb-3">
    <h5>Live Demo</h5>
    <p>
        Try picking a single non-image file, multiple files, and a single image file.
    </p>
    <div class="twr-file">
        <input type="file" id="mainDemoInput" multiple />

        <label for="mainDemoInput" class="btn btn-primary">
            <span class="mdi mdi-upload"></span>Select Files
        </label>
        <button type="button" class="btn btn-secondary twr-file-clear" title="Clear Selected File(s)">
            <span class="mdi mdi-cancel pr-1"></span>Clear Selected File(s)
        </button>
    </div>
</div>

let input = document.getElementById('mainDemoInput');
new twrFileInput(input);

Setup

The most basic setup will look like this:

<div class="twr-file">
    <input type="file" id="file1" />
    <label for="file1">
        Select a File
    </label>
</div>

let input = document.getElementByID('file1');
new twrFileInput(input);

The input and the label must be in an element with the class twr-file. The id attribute of the input and the for attribute of the label must match or clicking on the label will not trigger the input.

The class twr-file-button can be used for basic styling on the label or buttons. Remove this class if you are using a different style for the buttons.

You can add a button to clear all of the selected files by adding a button with the class twr-file-clear inside the main element:

<button type="button" class="twr-file-clear twr-file-button">
    Clear
</button>

More Examples

Options