The repository has been archived.

Fancy File Input

This jQuery plugin provides an enormous amount of flexibility for styling file input fields. The visual appearance is 100% customisable via CSS. No images are used so they display nicely on retina/HiDPI displays. They are responsive, accessible, and support internationalization (i18n).

Browser support

Firefox, Chrome, Edge, Safari (matching Atlassian's DC standard browser support policy)

How does it work?

Wrap your file input with a label with the ffi class and data attribute for the button text. If you can't modify the markup, or want to render this clientside first, then the JS will wrap it for you, however this can lead to a flash of unstyled content for the field and, depending on the height of the field, may cause some "jank" in the page.

<label class="ffi" data-ffi-button-text="Browse...">
    <input type="file" name="something" />
</label>

Take a look at the demos for more configurations and customisations.

Basic Usage

$(function(){
	$('input[type=file]').fancyFileInput();
});

Customise with options

$(function(){
    $('input[type=file]').fancyFileInput({
        buttonText: "Browse\u2026", // The text for the "button"
        multipleFileTextPattern: "{0} files", // Shown when multiple files are chosen
        clearButtonText: "Clear" // For screen readers
    });
});

Release

1. You'll need to first get package publishing permissions with atlas packages permission grant.
2. Remember to add a changelog entry in CHANGELOG.md and create a tag in the repo matching the version.
3. Run npm publish --tag alpha for testing version only in PAC or npm publish --userconfig=~/.npmrc-public for release to public PAC and npm (see https://hello.atlassian.net/wiki/spaces/~zxu2/pages/5795449397/How+to+locally+npm+publish+to+public+npm+2025+mid).
4. Then create a PR bumping the package version in package.json for the next development iteration.