title: Using HTML 5 File API to load a JSON file
body: <p>I want the user to be be able to chose a JSON file on there computer, this JSON file should then be made available to the client side Javascript. </p>
  
  <p>How would I do this using the FILE API, the ultimate goal is the the user selected JSON file to be available as an object which I can then play about with in Javascript. This is what I have so far:</p>
  
  <pre><code>JsonObj = null 
  
  
  
  function handleFileSelect(evt) {
      var files = evt.target.files; // FileList object
       f = files[0];
        var reader = new FileReader();
  
        // Closure to capture the file information.
        reader.onload = (function(theFile) {
          return function(e) {
            // Render thumbnail.
           JsonObj = e.target.result
           console.log(JsonObj);
          };
        })(f);
  
        // Read in the image file as a data URL.
        reader.readAsDataURL(f);
      }
  
  
  
  document.getElementById('files').addEventListener('change', handleFileSelect, false);
  </code></pre>
  
  <p><strong>FIDDLE</strong>: <a href="http://jsfiddle.net/jamiefearon/8kUYj/" rel="noreferrer">http://jsfiddle.net/jamiefearon/8kUYj/</a></p>
  
  <p>How would I convert the variable JsonObj to a proper Json object, one can can add new fields to etc. </p>