Load csv file with createfileinput

[tatecaarson]

I am trying to load a csv file with loadTable after a user uploads it with createFileInput. I can get createFileInput to work if i’m using an image but not with loadTable. Here’s the important bit of code:

input = createFileInput(handleFile);
  input.position(10, 10);

  function handleFile(file) {
    print(file);
    sheet = loadTable(file.name, 'csv', 'header', () => createElement('p', "done loading"));
  }

I get errors:
Failed to load resource: the server responded with a status of 404 (Not Found)

I know I am misunderstanding how one of these functions works but I can not quite figure it out.

Thanks!

[kll]

try:

loadTable(“data.csv”, “header, csv”)

not

loadTable(“data.csv”, “header”,“csv”)

loadTable() / Reference

[tatecaarson]

Thanks but that didn’t do it.
Still says:

GET http://localhost:3000/roster.csv 404 (Not Found)

[GoToLoop]

Have you already tried p5.File::data instead of p5.File::name for p5::loadTable()?

p5js.org/reference/#/p5.File/data

[tatecaarson]

Yes I did. I get these errors when I do that:

ERR_CONNECTION_RESET 400 (Bad Request)
ERR_CONNECTION_RESET 400 (Bad Request)
[object ReadableStream]
Uncaught (in promise) Error: [object ReadableStream]

It looks like it’s trying to load the entire csv file into the url, instead of the name of the file.

Is there something special about a csv file vs an image file because the same code works when I try it with an image. Don’t really understand.

[GoToLoop]

I’ve made a test sketch w/ p5::createFileInput() + p5::loadTable() using p5.File::data and it worked for “.csv” files for me:

https://gist.github.com/GoSubRoutine/f5261f83d9600c495e384d9f5824a077

If you’ve got issues to run it on your local machine, you can read some tips on the link below:

Code 800A0404 issue

Easiest & fastest recipe to run “.js” sketches under p5.js: Install any Firefox-based browser in your OS and use it to open your “index.html” file: Install Notepad2 or Notepad++ (or both) in your OS and use it to type in your “sketch.js” file there: https://XhmikosR.GitHub.io/notepad2-mod/ https://Notepad-Plus-Plus.org You can setup those text editors to use UTF-8 and LF line endings for better compatibility. Here’s my minimum “index.html” te…

[tatecaarson]

Hm…your example did not work with my csv file. Would you mind posting the one you used?

I get these errors:

p5:3 File "roster-small.csv" of type "text" was chosen.
raw/f5261f83d9600c495e384d9f5824a077/5a2bab21807103114079d4ec3d8fdf59bab0500d/Table%201Division,School,School%20Code,Test%20Code,Event,Event%20Location,First%20Name,Last%20Name,Expected%20Graduation%20Year,Place,District2,Abbeville%20High%20School,190000,102,Advanced%20Math-Pre%20Calculus,143%20Coates%20Hall,Joseph,Mudd,,,Southwest%20LA%20District2,Abbeville%20High%20School,190000,106,Agriscience%20III,100%20Dodson%20Hall,Clayton,Rachalla,,,Southwest%20LA%20District2,Abbeville%20High%20School,190000,107,Algebra%20I,105%20Tureaud%20Hall,Tra%20My,Le,,,Southwest%20LA%20District3,Jonesboro-Hodge%20High%20School,191335,108,Algebra%20II,204%20Tureaud%20Hall,Hartwell,Adams,2019,3,North%20LA%20District2,Abbeville%20High%20School,190000,109,Biology%20I,130%20Nicholson%20Hall,Rachel,Bui,,,Southwest%20LA%20District2,Abbeville%20High%20School,190000,112,Calculus%20I,152%20Coates%20Hall,Joel,Folse,,,Southwest%20LA%20District2,Abbeville%20High%20School,190000,113,Chemistry,215%20Williams%20Hall,Richard,Nguyen,,,Southwest%20LA%20District2,Abbeville%20High%20School,190000,117,English%20II,5%20Lockett%20Hall,Stella%20Rose,Broussard,,,Southwest%20LA%20District2,Lusher%20Charter%20High%20School,192041,121,Environmental%20Science,214%20Coates%20Hall,Zachary,Arendt,2018,2,Greater%20New%20Orleans%20District2,Belle%20Chasse%20High%20School,190257,123,Financial%20Literacy,103%20Williams%20Hall,Tyler,Andrews,2018,1,Greater%20New%20Orleans%20District1,West%20Feliciana%20High%20School,192615,132,Health,139%20Allen%20Hall,Madison,Aikens,2020,2,South%20Central%20District1,Ruston%20High%20School,192595,140,Physics,212%20Coates%20Hall,Preston,Allen,2018,2,North%20LA%20District2,Abbeville%20High%20School,190000,141,Principles%20of%20Business,102%20Williams%20Hall,Carly,Hebert,,,Southwest%20LA%20District2,Abbeville%20High%20School,190000,143,Sociology,16%20Lockett%20Hall,Morgan,Trahan,,,Southwest%20LA%20District1,Zachary%20High%20School,193070,144,Spanish%20I,130%20Howe-Russell,Kara,Anderson,2021,4,Southeast%20Louisiana%20District2,Abbeville%20High%20School,190000,145,Spanish%20II,130%20Howe-Russell,Kevin,Rosas,,,Southwest%20LA%20District1,Baton%20Rouge%20High%20School,190179,148,World%20Geography,9%20Lockett%20Hall,ZAYEED,AKHTER,2021,3,Southeast%20Louisiana%20District4,Choudrant%20High%20School,190475,149,World%20History,2%20Lockett%20Hall,Forrest,Adams,2018,1,North%20LA%20District3,Academy%20of%20Our%20Lady,191731,110,Biology%20II,130%20Nicholson%20Hall,Caroline,Lassere,2018,2,South%20Central%20District1,Dutchtown%20High%20School,190993,122,Family%20&%20Consumer%20Science,102%20Allen%20Hall,Molly,Anderson,2021,2,South%20Central%20District1,Pineville%20High%20School,192350,123,Financial%20Literacy,103%20Williams%20Hall,Kayla,Asper,2019,1,Northwest%20District2,Brusly%20High%20School,190365,139,Physical%20Science,119%20Nicholson%20Hall,Lilly,Acosta,2021,1,Baton%20Rouge%20District3,Academy%20of%20Our%20Lady,191731,143,Sociology,16%20Lockett%20Hall,Megan,Russell,2019,1,South%20Central%20District3,Academy%20of%20Our%20Lady,191731,146,Spanish%20III,130%20Howe-Russell,Amally,Abdeljabar,2020,3,South%20Central%20District3,Academy%20of%20the%20Sacred%20Heart,191985,103,Advanced%20Math%20-%20Functions%20&%20Statistics,143%20Coates%20Hall,Eva,Fenasci,2019,1,South%20Central%20District3,Academy%20of%20the%20Sacred%20Heart,191985,107,Algebra%20I,103%20Tureaud%20Hall,Grace,Evans,2021,2,South%20Central%20District:1 Failed to load resource: the server responded with a status of 404 ()
p5:3 Error: [object ReadableStream]
    at p5:3
(anonymous) @ p5:3
p5:3 Uncaught (in promise) Error: [object ReadableStream]
    at p5:3

[GoToLoop]

@tatecaarson

Would you mind posting the one you used?

p5js.ProcessingTogether.com/static/uploaded_resources/p.19392/cltop.csv

[tatecaarson]

I don’t understand how your example is working. I downloaded your csv and still get this error while running the code from the blocks.

[GoToLoop]

Which OS & browser you’re using btW? Mine’s Win 8.1 w/ 64-bit Firefox DE.

For a 2nd “opinion”, here’s another screenshot w/ Vivaldi browser:

What’s diff. from yours is the type of my file “cltop.csv” isn’t recognized; but yours is, as type “text”.

I believe when p5.File::type property is “text”, the p5.File::data already contains the loaded asset.

If it’s already loaded, we can’t use any loading function like
p5::loadTable() and such.