# Using createFileInput() to load JSON files during runtime

**URL:** <https://discourse.processing.org/t/using-createfileinput-to-load-json-files-during-runtime/27149>\
**Category:** Coding Questions\
**Created:** [January 17, 2021, 8:21pm UTC](https://discourse.processing.org/t/using-createfileinput-to-load-json-files-during-runtime/27149 "2021-01-17T20:21:00Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![polygonfuture](https://avatars.discourse-cdn.com/v4/letter/p/cab0a1/32.png) [@polygonfuture](https://discourse.processing.org/u/polygonfuture)\
**Post date:** [January 17, 2021, 8:21pm UTC](https://discourse.processing.org/t/using-createfileinput-to-load-json-files-during-runtime/27149/1 "2021-01-17T20:21:00Z")

</div>

Hi all,

**Overview**  
I am making a simple p5.js front-end for controlling some electro-mechanical displays. Its a simple drawing app with the ability to save a drawing out as JSON and load it back as JSON.

The output JSON file is an array of javascript objects, their xy positions, and a few other variables. My goal is to use createFileInput() to load the JSON interactively and then use the array of objects.

**My Problem**  
Saving is working great, but I am having problems with createFileInput() and loading the JSON file properly. I can’t seem to get the loaded file in the proper format.

I found this topic on github ([https://github.com/processing/p5.js/issues/4114#issuecomment-546919982](https://github.com/processing/p5.js/issues/4114#issuecomment-546919982)), but the solution but its giving me this error:

```auto
Uncaught TypeError: [file.data](http://file.data/).split is not a function (sketch: line 17)

* ▶ {file: File, _pInst: undefined, type: "application", subtype: "json", name: "dots.json"…}

🌸 p5.js says: There's an error as "split" could not be called as a function (on line 87 in about:srcdoc [about:srcdoc:87:29]). Verify whether "[file.data](http://file.data/)" has "split" in it and check the spelling, letter-casing (Javacript is case-sensitive) and its type. For more: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Errors/Not_a_function#What_went_wrong

▶️ Error at line 87 in "loadJson" in about:srcdoc (about:srcdoc:87:29) ▶️ Called from line 61642 in "FileReader.reader.onload" in p5.js (https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js:61642:15)

```

Ive tried a number of different ways to parse the data but I cant figure out how to get the json file to properly load.

**My Code**  
This is a simplified code block of my method / function:

https://editor.p5js.org/polygonfuture/embed/edkFrUJV7

```auto
let loadButton;
var dots = [];

function setup() {
  createCanvas(400, 400);
  loadButton = createFileInput(loadJson);
  loadButton.position(0,0);
  
}

function loadJson(file) {
  print(file);
  
  // Split file.data and get the base64 string
  let base64Str = file.data.split(",")[1];
  
  // Parse the base64 string into a JSON string
  let jsonStr = atob(base64Str);
  
  // Parse the JSON object into a Javascript object
  let obj = JSON.parse(jsonStr); 
  
  dots = obj;
  
  print(obj);

  //do something with it
}

```

**Json File:**

```auto
[
  {
    "x": 60,
    "y": 60,
    "col": 255,
    "scol": 0,
    "isPressed": false,
    "cDiam": 20
  },
  {
    "x": 60,
    "y": 80,
    "col": 255,
    "scol": 0,
    "isPressed": false,
    "cDiam": 20
  }
]

```

**Questions & Call for Help**  
I recognize this may not be the best way to do this. Does anyone know what might be my problem, or have a better way to handle this?

---

<div class="post-metadata">

**Author:** ![ErraticGenerator](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/erraticgenerator/32/11304_2.png) [@ErraticGenerator](https://discourse.processing.org/u/ErraticGenerator)\
**Post date:** [January 18, 2021, 2:00am UTC](https://discourse.processing.org/t/using-createfileinput-to-load-json-files-during-runtime/27149/2 "2021-01-18T02:00:40Z")

</div>

this works:

```auto
let loadButton;
let items

function setup() {
  createCanvas(400, 400);
  loadButton = createFileInput(loadJson);
  loadButton.position(0, 0);
}

function loadJson(file) {
  items = file.data
  console.log(items)
}

function draw() {
  if (items) {
    for (item of items) {
      fill(item.col)
      ellipse(item.x, item.y, 30, 30)
    }
  }
}

```