Form file

Replace the default file input with your own HTML content, like a button.

info I recommend using the new file input for accessibility.

Usage

To apply this component, just add the .f-form-file class to a container element around a button and an <input type="file"> element. You can also use any other element instead of a button.

info To use this component you will need to uncomment the Sass include at the bottom of the /assets/styles/sass/elements/_form.scss file.

Example

You can also use
text
.

Markup

<div class="f-form-file">
	<button class="f-btn">...</button>
	<input type="file">
</div>

<div class="f-form-file">Text<input type="file"></div>

Faux Text Input

To use a text input to show the filename add data-f-form-file to the file input and add a text input as the next sibling to it (and include the JavaScript).

Markup

<form class="f-form">
	<div class="f-form-file">
		<button class="f-btn f-form-file-right">Select</button>
		<input id="form-file" type="file" data-f-form-file>
		<input type="text" class="f-width-1-1">
	</div>
</form>

A Better File Input

After reading this article on Tympanus I felt that FatKit needed this, so this component has now been extended to support better file inputs.

Note: the size of the button will change depending on the file selected as the button's HTML changes to the filename (or count of files if more than one are selected). To prevent this you can set a max-width on the button that suits the design.

Markup

<form class="f-form">
	<div class="f-form-file">
		<input id="file" type="file" class="f-inputfile" data-f-multiple-caption="{count} files selected" multiple>
		<label for="file" class="f-btn f-btn-primary"><i class="material-icons">file_upload</i> <span>Choose a file</span></label>
	</div>
</form>

A more "styled" example showing what looks like an input next to the button

Markup

<form class="f-form">
	<div class="f-form-file">
		<input id="form-styled" type="file" class="f-inputfile" data-f-multiple-caption="{count} files selected" multiple>
		<label for="file-styled" class="f-btn f-btn-upload"><i class="material-icons">file_upload</i> <span>Choose a file</span></label>
	</div>
</form>