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

Answer 1

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