I want the user to be be able to chose a JSON file on there puter, this JSON file should then be made available to the client side Javascript.

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:

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);

FIDDLE: /

How would I convert the variable JsonObj to a proper Json object, one can can add new fields to etc.

I want the user to be be able to chose a JSON file on there puter, this JSON file should then be made available to the client side Javascript.

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:

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);

FIDDLE: http://jsfiddle/jamiefearon/8kUYj/

How would I convert the variable JsonObj to a proper Json object, one can can add new fields to etc.

• javascript
• html
• json
• fileapi

• maybe this will help. html5rocks./en/tutorials/file/dndfiles – Zach Lysobey Commented Feb 6, 2013 at 23:37
• I have read the tutorial you have mentioned and have updated my answer to show you what I have got. – Jamie Fearon Commented Feb 6, 2013 at 23:46
• You've got a small syntax bug in your example. There's no semicolon after JsonObj = e.target.result (in the inner-most code block) – Grant Peters Commented Jul 22, 2013 at 5:51

1 Answer 1

Don't load the data as a "DataUrl" via readAsDataURL, instead use readAsText then parse it via JSON.parse()

e.g.

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 = JSON.parse(e.target.result);
         console.log(JsonObj);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsText(f);
    }

document.getElementById('files').addEventListener('change', handleFileSelect, false);