jQuery Tower File Input Examples

Default Styling Single File

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

Select a File

Show/Hide Code

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

$('#demoInput1').fileInput();

Default Styling Single File With a Font Icon

Add 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="tower-file">
    <input type="file" id="demoInput2" />
    <label for="demoInput2" class="tower-file-button">
        <span class="mdi mdi-upload"></span>Select a File
    </label>
</div>

$('#demoInput2').fileInput({
                iconClass: 'mdi mdi-fw mdi-upload'
});

Default Styling Multiple Files

Select Files

Show/Hide Code

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

$('#demoInput3').fileInput({
    iconClass: 'mdi mdi-fw mdi-upload'
});

With Clear Button

Select Files

Show/Hide Code

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

$('#demoInput4').fileInput({
    iconClass: 'mdi mdi-fw mdi-upload'
});

Using Bootstrap 4 Styles

Select Files

Show/Hide Code

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

$('#demoInput5').fileInput({
    iconClass: 'mdi mdi-fw mdi-upload'
});