# Load csv file with createfileinput

**URL:** <https://discourse.processing.org/t/load-csv-file-with-createfileinput/8488>\
**Category:** Coding Questions\
**Created:** [February 17, 2019, 5:25pm UTC](https://discourse.processing.org/t/load-csv-file-with-createfileinput/8488 "2019-02-17T17:25:12Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![tatecaarson](https://avatars.discourse-cdn.com/v4/letter/t/b77776/32.png) [@tatecaarson](https://discourse.processing.org/u/tatecaarson)\
**Post date:** [February 17, 2019, 5:25pm UTC](https://discourse.processing.org/t/load-csv-file-with-createfileinput/8488/1 "2019-02-17T17:25:12Z")

</div>

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:

```auto
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!

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [February 17, 2019, 5:50pm UTC](https://discourse.processing.org/t/load-csv-file-with-createfileinput/8488/2 "2019-02-17T17:50:23Z")

</div>

try:

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

not

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

> **[loadTable() / Reference](https://processing.org/reference/loadTable_.html)**
>
> Reads the contents of a file or URL and creates a Table object with its values. If a file is specified, it must be located in the sketch's "data" folder. The filename parameter can also be a URL to a …

---

<div class="post-metadata">

**Author:** ![tatecaarson](https://avatars.discourse-cdn.com/v4/letter/t/b77776/32.png) [@tatecaarson](https://discourse.processing.org/u/tatecaarson)\
**Post date:** [February 17, 2019, 6:07pm UTC](https://discourse.processing.org/t/load-csv-file-with-createfileinput/8488/3 "2019-02-17T18:07:03Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 17, 2019, 10:33pm UTC](https://discourse.processing.org/t/load-csv-file-with-createfileinput/8488/4 "2019-02-17T22:33:50Z")

</div>

Have you already tried p5.File::_data_ instead of p5.File::_name_ for p5::**loadTable()**? 🤔

[p5js.org/reference/#/p5.File/data](http://p5js.org/reference/#/p5.File/data)

---

<div class="post-metadata">

**Author:** ![tatecaarson](https://avatars.discourse-cdn.com/v4/letter/t/b77776/32.png) [@tatecaarson](https://discourse.processing.org/u/tatecaarson)\
**Post date:** [February 18, 2019, 3:16am UTC](https://discourse.processing.org/t/load-csv-file-with-createfileinput/8488/5 "2019-02-18T03:16:11Z")

</div>

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

```auto
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.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 18, 2019, 6:28am UTC](https://discourse.processing.org/t/load-csv-file-with-createfileinput/8488/6 "2019-02-18T06:28:54Z")

</div>

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](https://discourse.processing.org/t/code-800a0404-issue/2036/3):
>
> Easiest & fastest recipe to run “.js” sketches under p5.js: running_man Install any Firefox-based browser in your OS and use it to open your “index.html” file: fox_faceInstall Notepad2 or Notepad++ (or both) in your OS and use it to type in your “sketch.js” file there: scroll[https://XhmikosR.GitHub.io/notepad2-mod/](https://XhmikosR.GitHub.io/notepad2-mod/)[https://Notepad-Plus-Plus.org](https://Notepad-Plus-Plus.org) You can setup those text editors to use UTF-8 and LF line endings for better compatibility. bulbHere’s my minimum “index.html” te…

---

<div class="post-metadata">

**Author:** ![tatecaarson](https://avatars.discourse-cdn.com/v4/letter/t/b77776/32.png) [@tatecaarson](https://discourse.processing.org/u/tatecaarson)\
**Post date:** [February 20, 2019, 4:24pm UTC](https://discourse.processing.org/t/load-csv-file-with-createfileinput/8488/7 "2019-02-20T16:24:52Z")

</div>

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

I get these errors:

```auto
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

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 20, 2019, 4:34pm UTC](https://discourse.processing.org/t/load-csv-file-with-createfileinput/8488/8 "2019-02-20T16:34:26Z")

</div>

> [@tatecaarson](#):
>
> Would you mind posting the one you used?

[p5js.ProcessingTogether.com/static/uploaded\_resources/p.19392/cltop.csv](http://p5js.ProcessingTogether.com/static/uploaded_resources/p.19392/cltop.csv)

---

<div class="post-metadata">

**Author:** ![tatecaarson](https://avatars.discourse-cdn.com/v4/letter/t/b77776/32.png) [@tatecaarson](https://discourse.processing.org/u/tatecaarson)\
**Post date:** [February 20, 2019, 4:52pm UTC](https://discourse.processing.org/t/load-csv-file-with-createfileinput/8488/9 "2019-02-20T16:52:37Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/5519a636dc78d4962010997134413ec65be60075.png)

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 21, 2019, 4:27am UTC](https://discourse.processing.org/t/load-csv-file-with-createfileinput/8488/10 "2019-02-21T04:27:52Z")

</div>

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

 ![Firefox%20Browser](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/42e77fc03cd19d6a7b75200fdbbfc7a49316780a.png)

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

 ![Vivaldi%20Browser](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/15bb8b3d0464b2d84a824ef850138654e32896a5.png)

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. 🥴