Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript: Load csv file and print it to page

I just started learning JavaScript yesterday and I am stuck in the very beginning.

My goal is to create a simple local html page, which reads in a csv file, print it to the page, and plot it using d3.js. This is what I have done so far:

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Test Program</title>
    <meta charset="UTF-8"/>
    <script>
      function uploadConfirmation(){
        alert("Data Loaded!");
      }
      function displayData(){
        var dataset = document.getElementById("uploaded_data").value;
        var show = [];
        for (var i=0; i < dataset.length; i++) {
          show.push('<span>' + dataset[i] + '</span>');
        }
    </script>
  </head>
  <body>
    <h1>My Test Web Page</h1>
    <form>
      Upload some files?
      <br/>
      <input type="file" id="uploaded_data"/>
      <br/>
      <input type="submit" onmouseup="uploadConfirmation()"/>
      <button type="button" onclick="displayData()">Display Data</button>
    </form>
  </body>
</html>

Could someone tell me the right logic to approach this problem?


Update
Thanks for all the comments. I managed to find some resources online and came up with some code. I wish it is helpful for others.

Following the direction from @tampis, here are two helpful resources online:
- Upload file using AJAX
- Upload file using File API

Here is my code for uploading and displaying the data:

<input type="file" id="fileinput" />
<script>
  function readSingleFile(evt) {
    var f = evt.target.files[0]; 
    if (f) {
      var r = new FileReader();
      r.onload = function(e) { 
          var contents = e.target.result;
          document.write("File Uploaded! <br />" + "name: " + f.name + "<br />" + "content: " + contents + "<br />" + "type: " + f.type + "<br />" + "size: " + f.size + " bytes <br />");

          var lines = contents.split("\n"), output = [];
          for (var i=0; i<lines.length; i++){
            output.push("<tr><td>" + lines[i].split(",").join("</td><td>") + "</td></tr>");
          }
          output = "<table>" + output.join("") + "</table>";
          document.write(output);
     }
      r.readAsText(f);
      document.write(output);
    } else { 
      alert("Failed to load file");
    }
  }
  document.getElementById('fileinput').addEventListener('change', readSingleFile);
</script>
like image 291
Boxuan Avatar asked Apr 02 '14 21:04

Boxuan


1 Answers

As @shadysherif (from comments) pointed out, re-posting the answer (with full working code) here.

Here are two helpful resources online:
- Upload file using AJAX
- Upload file using File API

Here is my code for uploading and displaying the data:

<input type="file" id="fileinput" />
<script>
  function readSingleFile(evt) {
    var f = evt.target.files[0]; 
    if (f) {
      var r = new FileReader();
      r.onload = function(e) { 
          var contents = e.target.result;
          document.write("File Uploaded! <br />" + "name: " + f.name + "<br />" + "content: " + contents + "<br />" + "type: " + f.type + "<br />" + "size: " + f.size + " bytes <br />");

          var lines = contents.split("\n"), output = [];
          for (var i=0; i<lines.length; i++){
            output.push("<tr><td>" + lines[i].split(",").join("</td><td>") + "</td></tr>");
          }
          output = "<table>" + output.join("") + "</table>";
          document.write(output);
     }
      r.readAsText(f);
      document.write(output);
    } else { 
      alert("Failed to load file");
    }
  }
  document.getElementById('fileinput').addEventListener('change', readSingleFile);
</script>
like image 95
Boxuan Avatar answered Sep 20 '22 11:09

Boxuan