Error with loadTable via drop

p5.js
1

In p5.js (v1.1.9, MacOS 10.15.6), I’m trying to load data into a table via the drop method. File appears to load fine, and when I log to the console I can see the file name and file contents no problem. The issue is loading that file into the a table. The drop examples I found online all show loadTable(file.data… ). But, the errors indicate loadTable wants the file path, which I believe is inaccessible. Here’s some example code. Appreciate any help I can get.

let dropzone;

function setup() { 
    dropzone = select('#drop_area');
    dropzone.drop(gotFile);
}

function gotFile(file) {
    loadTable(file.data, 'header', print);
}

Here’s the errors. Note the “Test,It,OK1,2,3” is the content of the .csv file, and obviously not the path.

 http://127.0.0.1:63991/Test,It,OK1,2,3 404 (Not Found)
🌸 p5.js says: It looks like there was a problem loading your table file. Try checking if the file path (Test,It,OK
1,2,3
) is correct, hosting the file online, or running a local server.
2

loadTable expects the first argument to be a URL. An address to a file located on a web server somewhere. That’s a problem when, as in your case, the file content is already available in memory.

You could use data URLs as a workaround. That’s a smart way to embed small data inside an URL. Imagine a plain text file hello.txt:

Hello World!

Represented like a data URL, it looks like this:

data:text/plain,Hello%2C%20World!

Fortunatly for us, loadTable happily accepts data URLs. :tada: A tiny adjustment to gotFile should do it:

function gotFile(file) {
  const dataURL = 'data:text/csv;charset=utf-8,' + encodeURIComponent(file.data);
  loadTable(dataURL, 'csv', 'header', print);
}