Read CSV file into a string using jquery

Question

I need to select a csv file from local file system and display the contents of that file as text using jquery.

I am using this for file Upload

<input id = "uploadCSV" type = "file" />

On its change event,

 $('#uploadCSV').change(function(e) {
 if(e.target.files != undefined) {
           var reader = new FileReader(); 
           reader.onload = function(e) {
           var lineSplit = e.target.result.split("\n");
           var commaSplit = lineSplit[0].split(",");
           var content = "";
           for(var i = 0; i < commaSplit.length; i++) {
                 var temp = commaSplit[i];
                 content = content + " " + temp;
           }
         };
         reader.readAsText(e.target.files.item(0));
         var fileContent = reader.result;
         alert(fileContent);
      }
 });

Somehow this doesn't work and I get null in alert when I use Firefox. If I use IE8, it crashes as it cannot locate e.target.result. Please advise

I am looking for the simplest way of converting a csv file in my local file system into plain text.

Thanks

Possible duplicate of http://stackoverflow.com/q/582268/901048 — Blazemonger, Jan 04 '13 at 14:41
The duplicate suggested mostly deals with writing to the same file.. however here my attempt is to read the file.. — user1528884, Jan 04 '13 at 14:56

Fermin · Answer 1 · 2013-01-04T15:14:24.197

1

You are alerting the reader.result outwith the onload event handler, you need to move the alert inside the event handler for this to work.

What you are doing just now will alert the reader.result before the file is loaded, at which point results will be null.

To avoid any errors with FileReader not being supported, do a check if (window.FileReader) before using it.

Change it to:

if ((window.FileReader) && (e.target.files != undefined)) {
  var reader = new FileReader(); 
  reader.onload = function(e) {
    var lineSplit = e.target.result.split("\n");
    var commaSplit = lineSplit[0].split(",");
    var content = "";
    for(var i = 0; i < commaSplit.length; i++) {
      var temp = commaSplit[i];
      content = content + " " + temp;
    }
    var fileContent = reader.result;
    alert(fileContent);
  };

  reader.readAsText(e.target.files.item(0));    
}

edited Jan 04 '13 at 15:14

answered Jan 04 '13 at 15:09

Fermin

34,961
21
83
129

Thank you Fermin.. this works as expected in firefox but doesn't work with IE8. Any workaround? – user1528884 Jan 04 '13 at 15:28
As AmericanUmlaut said, FileReader is not supported in IE8. You'll need to find some other technology to do the processing. – Fermin Jan 04 '13 at 15:51
Fermin, can this be accomplished using asp.net mvc? handling the file in an action result? – user1528884 Jan 04 '13 at 18:40
Yes you will be able to do this using asp.net MVC or any other server side language – Fermin Jan 04 '13 at 22:54

score 0 · Answer 2 · answered Jan 04 '13 at 15:04

0

FileReader is not supported in IE<10 (https://developer.mozilla.org/en-US/docs/DOM/FileReader -- see "Browser Support" at the bottom). If your solution is targeting IE8, then there is no way to do what you are trying to do in Javascript. You'll either have to use an embedded application like Flash, or post the file to your server and return the result.

answered Jan 04 '13 at 15:04

AmericanUmlaut

2,817
2
17
27

Thanks! can you give me an example of posting file to server? – user1528884 Jan 04 '13 at 15:29

score 0 · Accepted Answer · answered Jan 05 '13 at 19:42

I could resolve the issue by using asp.net mvc. See below for details

@using(Html.BeginForm("ProcessCsv","<YourControllerName>",FormMethod.Post, new {enctype = multipart/form-data" }))
{
     <input id = "myUpload" type = "file" name = "fileBaseParam"/>
     <input id = "btnSubmit" type = "submit" name = "ProcessCsv" value = "Submit" />
}

In your controller, define an actionresult,

[HttpPost]
public ActionResult ProcessCsv(HttpPostedFileBase fileBaseParam)
{
       var csvReader = new StreamReader(fileBaseParam.InputStream);
       string fileContent = csvReader.ReadToEnd();
}

HttpPostedFileBase is the crucial concept here.. You can find more information on this from http://www.codeproject.com/Articles/442515/Uploading-and-returning-files-in-ASP-NET-MVC.

Hope this information would help someone in future.

Thanks

Read CSV file into a string using jquery

3 Answers3