Tower File Input

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

Live Demo

Try picking a single non-image file, multiple files, and a single image file.


More Examples

Setup

The most basic setup will look like this:

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

The input and the label must be in an element with the class tower-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 tower-file-button is just used for the default button style. It can be removed if you are using a different style.

You can add a a clear button by adding a button with the class tower-file-clear inside the main element: 

<button type="button" class="tower-file-clear tower-file-button">
    Clear
</button>
Options
Option Name Default Value Description
fileList true Toggles showing the list of files if multiple files are selected.
iconClass null The class that will be used in the span before the text in the label when a file is selected. If this is null the span element will not be generated.
imgPreview true Toggles showing the preview image if a single image file is selected.
imgPreviewClass null Set the class that will be added to the preview image.
imgPreviewSelector null jQuery selector for a img element that will be used for the image preview instead of the default preview image.