Load csv file with createfileinput

p5.js Coding Questions
1

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!

1 Like
2

try:

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

not

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

3

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

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

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

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

5

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.

6

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

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

1 Like
7

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
8

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

9

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.

29%20AM
Screen Shot 2019-02-20 at 10.51.29 AM.png877×118 17.3 KB

10

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

Firefox%20Browser
Firefox Browser.png689×505 18.7 KB

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

Vivaldi%20Browser
Vivaldi Browser.png640×562 13.6 KB

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

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

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

1 Like