Files ...

Lecture

Twitter

Email

Today - A short preview of files api

1. File API (Read)

   Introduction to HTML5 file API

2. FileSystem API (Read/Write)

   Introduction to HTML5 fileSystem API

3. NPAPI (Steal files ... )

   [not part of W3C ]
   Full Access to any file on the client HD

File API features

* File System API extends this API (Write → FileWriter)

• Import from the filesystem or the web.
• Create new files from scratch.
• Manipulate existing file data.
• Store file data on the client.
• Publish files back to the web.

File API Objects

The File API spec provides a standard way to interact with local files.

API Objects:

• File Provides readonly information and a reference to the file handle.
• FileList An array-like sequence of File objects.
• FileReader Read file contents into memory (asynchronously)
• Blob Allows for slicing a file into byte ranges.
• Drag/Drop Build in support for files Drag And Drop

File API - Flow

• After you've obtained a File reference, instantiate a FileReader object inorder to work with the file.
• The FileReader used to asynchronously read the file content (into memory) using JavaScript event handling.
• It is possible to monitor the
  progress of a read , catch errors , and determine when a load is complete.
  In many ways the APIs resemble XMLHttpRequest's event model.

File API - FileReader (Methods)

FileReader includes four options for reading a file, asynchronously:

• FileReader.readAsBinaryString(Blob|File)
  Result = the file/blob's data as a binary string (bytes 0-255).
• FileReader.readAsText(Blob|File, opt_encoding)
  Result = the file/blob's data as a text string. (Default encoding is UTF-8)
• FileReader.readAsDataURL(Blob|File)
  Result = the file/blob's data encoded as a data URL.
• FileReader.readAsArrayBuffer(Blob|File)
  Result = the file/blob's data as an ArrayBuffer object.

File API - FileReader (Events)

• onloadstart
• onprogress
• onload
• onloadend
  
  
• onabort
• onerror

File API - Code

<input type="file" id="..." name="..." multiple webkitdirectory/>

        // Add the event listener to the input type="file"
        document.querySelector('#id').addEventListener('change',
            function(e){
                var i, files;

                // FileList object. list of the selected files
                files = e.target.files;

                // Extract the information we can from the files/folder
                for (i = 0, f; f = files[i]; i++) {
                    // f.name
                    // f.type
                    // f.size
                    // f.lastModifiedDate.toLocaleDateString()
                }
                ...
            }, false);
    

File API - Demos

• Simple
• Drag & Drop
  
• Copy & Paste
• Read part of file
• Read progress
• Read MP3

FileSystemAPI

NPAPI - Demo