Olivier Audard

In this post, I’ll continue to work on the code started in the first article on Feature Detection and File Upload Forms, so you’d better read it before going further.

Last time, we created a Javascript component used to upload a file asynchronously on the server.
It uses FormData and FileList APIs in modern browsers but also degrades gracefully with browsers that don’t support those APIs.

This time, I’ll explain how to handle the thumbnail associated to the file input field.
It’s a good example to introduce loosely coupled modules, and to show some other uses of the feature detection technique.

Last Thursday, I gave a talk at @JSSophia, the local Javascript User Group I co-founded with @FredGuillaume.
The group is just starting (2nd meeting), so there were only a few people, but as some of them looked quite interested by my talk, and some other couldn’t come due to personal or professional duties, I thought I could write a couple of blog posts about the same topic.

I choose File Upload Form example because it’s standalone, frequently used and it can be improved by many ways with HTML5 APIs.
It’s a good example to introduce some very important Javascript concepts:

1. Using feature detection for progressive enhancement
2. Using loosely coupled modules to architecture web applications.

This post focus on the first part of the talk.
It presents the feature detection technique.
I’ll cover the second part, loosely coupled modules, in another article.