Error with loadTable via drop

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(… ). 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');

function gotFile(file) {
    loadTable(, '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.,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
) is correct, hosting the file online, or running a local server.

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:


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(;
  loadTable(dataURL, 'csv', 'header', print);