Using createFileInput() to load JSON files during runtime

p5.js Coding Questions
1

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), but the solution but its giving me this error:

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:

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:

[
  {
    "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?

2

this works:

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)
    }
  }
}
1 Like