Tower File Input - Examples

Examples

Default Styling Single File

Basic setup using the class twr-file-button on the label for the default styling included in the plugin.

Select a File

Show/Hide Code

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

new twrFileInput(document.getElementById('demoInput1'));

With Clear Button

Add a button with the twr-file-clear class. This will allow deselecting all of the selected files.

Select Files

Show/Hide Code

<div class="twr-file">
    <input type="file" id="demoInput4" multiple />
    <label for="demoInput4" class="twr-file-button">
        <span class="mdi mdi-upload"></span>Select Files
    </label>
    <button type="button" class="twr-file-clear twr-file-button">Clear</button>
</div>

new twrFileInput(document.getElementById('demoInput4'), {
    iconClass: 'mdi mdi-fw mdi-upload'
});

Default Styling Single File With a Font Icon

Adds a font icon before the text when any files are selected. The icon when no files are selected has to be in the HTML of the label when the plugin is initialized.

Select a File

Show/Hide Code

<div class="twr-file">
    <input type="file" id="demoInput2" />
    <label for="demoInput2" class="twr-file-button">
        <span class="mdi mdi-upload"></span>Select a File
    </label>
    <button type="button" class="twr-file-clear twr-file-button">Clear</button>
</div>

new twrFileInput(document.getElementById('demoInput2'), {
    iconClass: 'mdi mdi-fw mdi-upload'
});

Default Styling Multiple Files

Add the multiple attribute to the file input to allow selecting multiple files.

Select Files

Show/Hide Code

<div class="twr-file">
    <input type="file" id="demoInput3" multiple />
    <label for="demoInput3" class="twr-file-button">
        <span class="mdi mdi-upload"></span>Select Files
    </label>
    <button type="button" class="twr-file-clear twr-file-button">Clear</button>
</div>

new twrFileInput(document.getElementById('demoInput3'), {
    iconClass: 'mdi mdi-fw mdi-upload'
});

Using Bootstrap Styles

Replace the twr-file-button class with something like Bootstraps button classes

Select Files

Show/Hide Code

<div class="twr-file">
    <input type="file" id="demoInput5" multiple />
    <label for="demoInput5" class="btn btn-primary">
        <span class="mdi mdi-upload"></span>Select Files
    </label>
    <button type="button" class="btn btn-secondary twr-file-clear align-top">Clear</button>
</div>

new twrFileInput(document.getElementById('demoInput5'), {
    iconClass: 'mdi mdi-fw mdi-upload'
});