HTML5Labs is where Microsoft prototypes early and unstable specifications from web standards bodies such as W3C. Sharing these prototypes helps us have informed discussions with developer communities, and enables us to provide better feedback on draft specifications based on this implementation experience. To find out more about HTML5Labs, read the blog by Jean Paoli, President, Microsoft Open Technologies, Inc.

Important Note: This feature is now available in the IE10 Platform Preview that was released at Microsoft's recent Build conference with the Developer Preview of Windows 8. You might notice some differences between the IE10 Platform Preview implementation. We recommend using the IE10 Platform Preview instead of this prototype as we don't plan any future updates to this prototype.

 

The prototype is based on the lastet spec draft. Read the full specification here.

To understand the system requirements and limitations of the current prototype implementation, read the release notes here

FileAPI is one of the HTML 5 working specifications driven by the W3C WebApps working group to represent file objects in web applications.

The following sample shows the FileDialog so the user can select some files and then calls a function to read the content of the file.


1: var fileSelector = GetFileSelector();

2: var iFileList = fileSelector.OpenFileDialog();

3: fileSelector.close();

4:  

5: var iFileObject = iFileList[0];

6: getAsTextFile(iFileObject, 0, iFileObject.size);

7:  

8: function getAsTextFile(iFileObject, start, end) {

9:     try {

10:         if (iFileObject)

11:         {

12:             alert("File Name: " + iFileObject.name + "; Last modified date: "

13:                      + iFileObject.lastModifiedDate + "; File size: " + iFileObject.size);

14:  

15:             var iFileObject1 = iFileObject.slice(start, end);

16:             if (iFileObject1) {

17:  

18:                 var fileReader = new FileReaderDraft();

19:  

20:                 // Handle progress, success, and errors

21:                 fileReader.onloadstart = function (event) {

22:                     alert("loading started");

23:                 };

24:                 fileReader.onprogress = function (event) {

25:                     alert("event.loaded= " + event.loaded + " " + " event.total = " + event.total);

26:                 };

27:                 fileReader.onload = function (event) {

28:                     alert("file loaded");

29:                     var txt = event.target.result;

30:                     alert(txt);

31:                 };

32:                 fileReader.onabort = function (event) {

33:                     alert("reading aborted");

34:                 };

35:                 fileReader.onerror = function (event) {

36:                     alert("read error");

37:                 };

38:                 fileReader.onloadend = function (event) {

39:                     alert("loadend");

40:                     fileReader.close();

41:                 };

42:  

43:                 fileReader.readAsText(iFileObject1);

44:             }

45:         }

46:  

47:     }

48:     catch (e) {

49:         alert("Invalid IFile object.");

50:     }

51: }

52:  

 

When we build these prototypes, our approach is to get things out quickly and iterate as the specifications change. In order to do that we use a range of technologies, including but not limited to HTML, C++, JScript, Silverlight, CSS, ActiveX, WCF, .Net, and JQuery. The technologies used going forward may vary to facilitate rapid development.