The html5 upload API

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.

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.

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.

Search

Se inscreva e receba oportunidades de trabalho em diferentes projetos

See my posts on Medium

Career

About

Alexandre Magno is a senior software engineer at Danske Bank. Web developer for 7 years, he is active in open source community, and a jQuery Evangelist, with strong experience in Ruby on Rails and Wordpress. He's already develop a lot of libraries widely used at Globo.com and was a core developer for making the websites work in mobiles with responsive design. He's active contributor of the Bootstrap framework and develop the Globo Bootstrap, the first translation of Bootstrap to Portuguese with open source components from Globo.com. See my open source projects at Github