HTML5 File API – Part 1: FileList and File interface example

Hello,

In this post I will be talking about new HTML5 file API. Please let me know if this post can be improved. File API will be touched on in 3 posts in HTML5 category.

  1. Introduction – this post
  2. File Reading
  3. Extended specification – creating a local file on clients machine

Lets start knowing about File API. So up until now there have been no support for local file reading or writing but with HTML5 this is changing without compromising the security of course. The File API from my personal point of view is great addition and allows us to

  • Read information about the selected files
  • Read actual contents of the file.

In this post I will concentrate on FileList and File interfaces.

Let me first of all make a point clear about the security

Security

Now because File API works with files that are outside the working area of browser on client’s machine, it is obvious to get concerned about security. Alright so from the specification it is understood that File API will only work with the user selected files. i.e. File API will not be able to provide you with a Directory structure or work on files on its own rather if will only work with user selected files or files that user is giving exclusive permission to be read.

FileList and File interface

Lets now check these two interfaces. I will give you a demo to work with and you can see yourself.

Before we jump on that I would like to make this point clear that at the time of writing File API works on Chrome 9+, Firefox 3.6+, IE10+, Opera 11.1+

In this exercise we will create a File input box and once user select some files we will output key meta information of the selected files.

The Code

Demo

Demo for the above listing can be found here

http://jaspreetchahal.org/examples/html5/html5-file-api-intro.html

We will look into a little bit more complex example in post 2 that will touch base on FileList and File interface again and also touch base on how to read content of a file.

 

Educational resources

More information can be found on w3 website and the link to File API spec is provided below

http://www.w3.org/TR/FileAPI/

I hope that this helps and if you found any error or would like to offer an improvement to this post, leave your comments.

Cheers

 

Comments

  1. i enjoyed your filelist file api part 1 it was a good starting point. do you have a part 2 (i hope, i hope).

    thanks
    dean

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.