jfancyfile – take control of your file input fields & customize ’em with this jQuery plugin

jfancyfile is a jQuery plugin that enables taking control of your file input fields & customizing ’em.

Demo

Check demo.html

Usage

Add the following lines just before your </head> tag:

<link href="jfancyfile.css" rel="stylesheet" type="text/css">
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.jfancyfile.js" type="text/javascript"></script>

Then create your customized menu:

<form>
  <input type="file" id="upload-file" name="file" />
</form>

Finally, you may want to customize its style, by adding some custom CSS. Here is an example:

<style type="text/css">
.fancy-upload {
  background: #f7f7f7;
  border-radius: 9px;
  border: 1px solid #eee;
}
.fancy-upload:hover {
  background: #ddd;
  border-color: #888;
}
</style>

Options

The basic usage is this one-liner:

$('#file').jfancyfile();

But options can be passed as arguments:

`width` and `height`

The dimensions can be defined in the options.

$('#file').jfancyfile({
  width: 300,
  height: 200
});

License

jfancyfile is open source and is licensed under the MIT license.