# Drop CSV file to loadTable()

**URL:** <https://discourse.processing.org/t/drop-csv-file-to-loadtable/11324>\
**Category:** Coding Questions\
**Created:** [May 17, 2019, 10:48am UTC](https://discourse.processing.org/t/drop-csv-file-to-loadtable/11324 "2019-05-17T10:48:29Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![phoebus](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/phoebus/32/481_2.png) [@phoebus](https://discourse.processing.org/u/phoebus)\
**Post date:** [May 17, 2019, 10:48am UTC](https://discourse.processing.org/t/drop-csv-file-to-loadtable/11324/1 "2019-05-17T10:48:29Z")

</div>

Hello

I make a txt file with a header line, separated by commas, and some data lignes.

```auto
ID, name, age, favorite color
00, Robert, 32, blue
01, Michele, 36, white

```

If I use the [`drop()`](https://p5js.org/reference/#/p5.Element/drop) function, I get the [`file`](http://p5js.org/reference/#/p5.File) parameter

the [`file.data`](http://p5js.org/reference/#/p5.File/data) returns me an array containing every caracters in my text file

Is there a way to get my data the way [`loadTable()`](http://p5js.org/reference/#/p5/loadTable) does, as an ordered table corresponding to my csv data ?

---

<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:** [May 17, 2019, 11:35am UTC](https://discourse.processing.org/t/drop-csv-file-to-loadtable/11324/2 "2019-05-17T11:35:10Z")

</div>

> [@Load csv file with createfileinput](https://discourse.processing.org/t/load-csv-file-with-createfileinput/8488/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

---

<div class="post-metadata">

**Author:** ![phoebus](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/phoebus/32/481_2.png) [@phoebus](https://discourse.processing.org/u/phoebus)\
**Post date:** [May 17, 2019, 1:46pm UTC](https://discourse.processing.org/t/drop-csv-file-to-loadtable/11324/3 "2019-05-17T13:46:43Z")

</div>

Hi @GoToLoop

I don’t see the “link below”

Do you mean you got something like this to work ?

```auto

let myTable;

function setup() {
  const c = createCanvas(710, 400);
  background(100);
  c.drop(gotFile);
}

function draw() {
  fill(255);
  noStroke();
  textSize(24);
  textAlign(CENTER);
  text('Drag the file onto the canvas.', width / 2, height / 2);
  noLoop();
}

function gotFile(file) {

  if (file.type === 'text') {

  myTable = loadTable(file.data, 'csv', 'header');

  text(myTable.getString(1,1), width / 2, height / 2 + 20);

  } else {
    console.log('Not a proper file!');
  }
}

```

---

<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:** [May 17, 2019, 7:57pm UTC](https://discourse.processing.org/t/drop-csv-file-to-loadtable/11324/4 "2019-05-17T19:57:34Z")

</div>

> [@phoebus](#):
>
> I don’t see the “link below”.

That’s a “boxed” link 🔗. You need to click at its blue text: 🖱  
**_“Load csv file with createfileinput”_**

You can also expand to its whole post text by clicking at the down arrow 🔽 at its top-right side. 😉

---

<div class="post-metadata">

**Author:** ![phoebus](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/phoebus/32/481_2.png) [@phoebus](https://discourse.processing.org/u/phoebus)\
**Post date:** [May 19, 2019, 10:40am UTC](https://discourse.processing.org/t/drop-csv-file-to-loadtable/11324/5 "2019-05-19T10:40:04Z")

</div>

Ok, got it to work 🙂

```auto

"use strict";

let csv;
let fileName;

function setup() {
  const c = createCanvas(710, 400);
  c.drop(gotFile);

  fill(255);
  noStroke();
  textSize(24);
}

function draw() {
  background(100);
  
  if(csv == null){
  textAlign(CENTER);
   text('Drag file onto the canvas.', width / 2, height / 2);
  }else{
  textAlign(LEFT);
  text(fileName , width / 4, height / 2 - 25);
  text(csv.getColumnCount() + ' colonnes ' + csv.getRowCount() + ' lignes' , width / 4, height / 2);
  text(csv.getString(1, 3) , width / 4, height / 2 + 25);
 }

}

function gotFile(f) {
  fileName = f.name;
  if (f.name.endsWith('.csv')) {
   csv = loadTable(f.data, 'header', print);
 } 

}

```

I just drop a txt file where I changed the extension to .csv  
and the content being

```auto
id,name,age,link
0,robert,32,processing.org
1,sophie,27,rich.gg

```

thx for the help @GoToLoop