h5ile JavaScript helper utility library for the HTML5 File API

• Background on HTML5 File API:

  HTML5 File API is a W3C standard that allows local file access via web-based JavaScript.

  The HTML5 File API reuses the same HTML form field input tag of type 'file' previously available in HTML 4.01, but with which it was only possible to upload the file contents to a remote web server rather than directly read the contents locally.

  HTML5 File API is known to work on:

  • Chrome 7
  • Firefox 3.6.11

  HTML5 File API is known NOT to work on:

  • Internet Explorer 8
  • Safari 5.0.1

• h5ile utility library features:

  • Can determine if the user's browser supports HTML5 File API.
  • Takes over the chore of creating and instantiating the HTML form field file input tag.
  • Traps the appropriate file input tag events to extract the file data.
  • Allows loading of file data with a single call to a utility function.
  • Can determine total characters in a text file.
  • Can determine total lines in a text file.
  • Can extract individual lines out of text files by their index number, with line separators still intact or removed.
  • Can extract individual line tokens by their index number.

• Test HTML5 File API capability and the h5ile toolkit in your browser:

• Example code:

  • To include the h5ile toolkit JavaScript file on your page:

      <!-- Including the h5ile toolkit JavaScript file: -->
      <script type='text/javascript' src='h5ile.js'></script>
    

  • Simple demo text file viewer HTML markup:

      <div style='display:none;' id='demo_container'>
        <!--
          This div will initially be hidden from view, and only shown if the
          browser supports HTML5 File API.
        -->
        Visible file input:
        <span id='visible_file_input'></span>
        <!--
          The h5ile toolkit will insert the visible HTML form field file input tag
          into the span above.
        -->
      </div>
      <div>
        Loaded file displays here:
        <pre
           id='loaded_file_contents'
           style='border: solid 1px black; overflow: auto;'>
        </pre>
      </div>
    

  • JavaScript code for basic text file loading and display via the h5ile toolkit:

      <!-- This script tag can go right after the HTML markup above. -->
      <script type='text/javascript'>
          // <!--
    
          // Check if this browser supports the HTML5 File API:
          if (h5ile.isFileAPISupported()) {
              // Have browser support.
    
              // This makes the demo container visible.  Recommend doing this via
              // a JavaScript toolkit such as Dojo or jQuery in real life.
              document.getElementById('demo_container').setAttribute('style', "");
    
              // This function call inserts the visible HTML form field file input
              // tag into the span with HTML id 'visible_file_input', and loads
              // the text file:
              h5ile.createVisibleFileInput(
                    'visible_file_input',
                    {
                        loadtext: {
                            onloadend: function(file, file_reader) {
    
                                // Callback function receives HTML5 File API
                                // 'File' and 'FileReader' objects associated with
                                // the file and containing the file contents.
    
                                var elContents = document.getElementById(
                                                      'loaded_file_contents');
                                elContents.textContent = file_reader.result;
                            }
                        }
                    });
          }
          // -->
      </script>