0

Basically, I want to upload ONLY a CSV file via Javascript or jQuery.

I want to try and do this without any PHP involved.

I need to use a HTML upload form, and then save only it's contents to a multidimensional array or a string.

I do not need to save the uploaded file to the server, I just need to save it's contents to a string as stated.

I have looked far and wide online, yet everything involves PHP.

Is this possible with just Javascript or jQuery?

Thanks in advance

Fizzix
  • 23,679
  • 38
  • 110
  • 176

4 Answers4

2

This uses a library I wrote and released under the GPLv3 License: html5csv

The example below uploads a CSV file into the browser, where it is available as an array of arrays.

The library supports various block operations, such as make a table, edit, plot, fit, call a function, save in browser session storage or local storage.

JSFIDDLE

html

Choose a CSV file to load into the application:   
<input id='foo' type='file'>
<hr />

js (requires jQuery and html5csv.js)

CSV.begin('#foo').
      table('output', {header:1, caption:'Uploaded CSV Data'}).
      go();

Here, go() can take a function callback (e,D), where e will contain an error string or null, and D is an object that may contain D.rows[0][0],...,D.rows[n-1][m-1] for a n x m matrix of data. Row 0 may be a header row.

Asynchronicity is used, in fact enforced in places. So beware that like AJAX, this code will return immediately to the subsequent line, and is best read as setting up a workflow of what to do when the previous step becomes ready.

Saving/Restoring

You can save data into the user's browser localStorage object with .save('local/someKey'). somewhere in the workflow, and data existing in the array at that point will be stored in HTML5 local storage (perhaps even compressed if you include the LZString library as documented), until the browser user deletes it.

Then in the same page or another page on the same web site you can get the data back out with CSV.begin('local/someKey')...

Using the data

You should put any code you want to use the data into a function that can fit either the callbacks expected by html5csv's call or go as documented on the html5csv site.

Paul
  • 26,170
  • 12
  • 85
  • 119
  • Good. Just realize this is still early code (as of Aug 2013). I've written some unit tests for it, but there can always be new bugs or new uses that aren't covered. – Paul Aug 24 '13 at 04:15
  • So then where is the array saved to? How would I access this array later on? – Fizzix Aug 24 '13 at 04:19
  • You can save it with `.save('local/someKey').go();` and it will be in HTML5 local storage (perhaps compressed), until the browser user deletes it. Then in another page on the same web site can get it back out with `.begin('local/someKey')...` – Paul Aug 24 '13 at 04:21
  • Sorry mate, I'm still quite confused haha. I just need to save a CSV as an array, or even better as just a string. How would I go about doing that with your script? I don't really need to display it's contents to the user. – Fizzix Aug 24 '13 at 04:24
  • Then delete the part that says `.table(stuff).` and provide `go` with a callback function `callback (e,D) ` that you defined that takes the array of data in `D.rows` and stores it as you prefer. From experience, I find saving the array as a string, compressing that string, and sticking it inside localStorage to be valuable. But you don't need to do that. You can do whatever you like with the go callback. – Paul Aug 24 '13 at 04:29
  • Still confused haha. I need an example on how to exactly save it as a string as you stated? – Fizzix Aug 24 '13 at 05:12
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/36145/discussion-between-paul-and-fizzix) – Paul Aug 24 '13 at 05:13
1

The jQuery CSV plugin can use client-side file handling (no need for server-side script like PHP):

https://code.google.com/p/jquery-csv/#Client-Side_File_Handling

leepowers
  • 37,828
  • 23
  • 98
  • 129
  • Yeah I came across that when searching online. Although, it does not have an example on how to do it with a HTML unload form. So I am not to sure how to go about doing it... – Fizzix Aug 24 '13 at 03:51
1

You can use plugin which allow you to parse CSV into Array.

http://code.google.com/p/jquery-csv/

Features

  • Convert a CSV String to an array
  • Convert a multi-line CSV string to a 2D array
  • Convert a multi-line CSV string to an array of objects (ie header:value pairs)
  • Convert an array of values to CSV (under development)
  • Convert an array of objects to CSV (under development)
  • Hooks/Callbacks to extend the default parsing process
  • Customizable delimiter (default: ") and separator (default: ,) characters
  • Node.js support (ie CommonJS importing and async callback support)
Dipesh Parmar
  • 27,090
  • 8
  • 61
  • 90
1

To do the upload, you need to be able to read the file off the disc. You can do this with the HTMl5 File API. I'm sure there are jQuery libraries to simplify this, but that's the underlying tech.

Someone else posted a question (and solution) on how to do that with jQuery: html5's file api example with jquery?

Once you've got access to the file in the browser, use a CSV library to work with it.

Community
  • 1
  • 1
Calvin Froedge
  • 16,135
  • 16
  • 55
  • 61