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.
<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.
<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
<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
<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
<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' });