Parsing a static CSV file using HTML5

Question

Found a nice demo of using the HTML5 file api to parse a csv file and display the output very nicely.

http://rohitrox.github.io/js_csv/

What if I didn't want to load the file from my local system but had a static file to inputer eg test.csv. I know this is a security issue, but is there any workaround?

function handleFileSelect(){
  var file = document.getElementById("the_file").files[0];
  var reader = new FileReader();
  var link_reg = /(http:\/\/|https:\/\/)/i;
  reader.onload = function(file) {
              var content = file.target.result;
              var rows = file.target.result.split(/[\r\n|\n]+/);
              var table = document.createElement('table');

              for (var i = 0; i < rows.length; i++){
                var tr = document.createElement('tr');
                var arr = rows[i].split(',');

                for (var j = 0; j < arr.length; j++){
                  if (i==0)
                    var td = document.createElement('th');
                  else
                    var td = document.createElement('td');

                  if( link_reg.test(arr[j]) ){
                    var a = document.createElement('a');
                    a.href = arr[j];
                    a.target = "_blank";
                    a.innerHTML = arr[j];
                    td.appendChild(a);
                  }else{
                    td.innerHTML = arr[j];
                  }
                  tr.appendChild(td);
                }

                table.appendChild(tr);
              }

              document.getElementById('list').appendChild(table);
          };
  reader.readAsText(file);
 }
 document.getElementById('the_form').addEventListener('submit', handleFileSelect, false);
 document.getElementById('the_file').addEventListener('change', fileInfo, false);

Answer 1

Actually, requesting text files from an outside URL is not that uncommon; in fact, it predates the File API. Ever heard the buzzword "AJAX"?

Asynchronous requests are just a little more complicated to do in a proper cross-browser way, so there are many libraries that, among other features, contain easy ways to do it. JQuery, often recognized by the "$" sign, is one example, but you could search for your own by googling "AJAX library".

$.ajax({
    url: 'files/file.csv', // this will automatically be seen as a relative URL
      //to the page you've navigated to, ie "http://www.google.com/files/file.csv"
    success: function(data) {
        // This function won't execute right away, but when the server's
        // text response comes back.
        // "data" will be a string containing the text of the response.
        document.getElementById("csvOutputDisplay").textContent = data;
    }
}

Answer 2

No. There is no way to do this. You have to select local file manually every time. If it wouldn't work like that, every site could access your files without your permission.