One of the great things that’s the new to HTML specification for Mozilla it’s the new way to access files and handle upload. Now you have access to basic file information, that it wasn’t possible before with native implementation, cause you just had access to file after the user post the form data. Now the Mozilla browsers since version 4.0 has a temporary storage of the file at client machine, and there’s more, you can handle multiple uploads. You don’t need use third party libraries like swfupload anymore, but to keep full support for any kind of users, you can still use it as fallback.
The support is still limited to Firefox, but it’s a great example how the new things at HTML5 gave us freedom to make a better user experience.
So let’s imagine that you have a simple html form with a input file, a related css and the following javascript explained.
[jsfiddle url=”http://jsfiddle.net/q8FTA/3/” height=”300px” include=”html,css,js,result”]
With the new FileReader Class you can trigger a click at file input, and this way you can handle the file choose dialog after a user select a file. So you can bind a change event and handle the file chosen.
You can have a complete documentation at mozilla MDC page.
Important: If you want to use a normal link to trigger the dialog page, you should hide the input file, but not with display hidden, but with opacity: 0, because chrome don’t accept to trigger a event in a hidden file field.
