‹ XFI project page

XFI Demonstration

This page provides a demonstration of how you can use XFI to extend and enhance HTML5 file inputs.

Background

Here we have a typical file input..

With the new features available in HTML5 file inputs we can:

• Allow the user to select multiple files
• Access the files chosen in Javascript

The next file input will allow you to select multiple files - providing your browser supports everything!

XFI steps in

Having a simple way of adding multiple file uploads into a HTML5 form is great but we're still left with a few niggling issues:

• The appearance of file inputs remains inconsistent between browsers
• None of the browsers give you any indication when a file input supports multiple file selection
• The ability to see what was selected could be improved

With XFI now enabled on the file input we get a more consitent and better experience for the user:

As you can see, we now have a nice standarised button which is consistent across differnet browsers and platforms and easily styleable with some CSS.

Any files chosen by the user are displayed above the input in a <ul> element. File sizes are displayed for each file as <i> elements. All of this is also easily styleable with a dab of CSS.

If XFI detects any file uploads that are going to take place when the form is submitted it will automatically disable the form's submit button and display a message to the user about what is happening. If you're already doing things with the form's submit button then you can easily disable this feature.

• › Go to the XFI project page
• › Read the documentation