Load-CSV with jQuery

Response to http://stackoverflow.com/questions/39615107

by mjh42

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://rawgit.com/evanplaice/jquery-csv/master/src/jquery.csv.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>
<fieldset>
    <legend> upload .csv-file </legend>
    <input type="file" name="File Upload" id="txtFileUpload" accept=".csv" />
    <input type="text" id="field_50euu" name="emailadresses" value="">
</fieldset>

JavaScript

// function process_csv() {

// The event listener for the file upload
document.getElementById('txtFileUpload').addEventListener('change', upload, false);

// Method that checks that the browser supports the HTML5 File API
function browserSupportFileUpload() {
  var isCompatible = false;
  if (window.File && window.FileReader && window.FileList && window.Blob) {
    isCompatible = true;
  }
  return isCompatible;
}

// Method that reads and processes the selected file
function upload(evt) {
  if (!browserSupportFileUpload()) {
    alert('The File APIs are not fully supported in this browser!');
  } else {
    var data = null;
    var files = evt.target.files;
    var file = files[0];
    var reader = new FileReader();
    reader.readAsText(file);
    reader.onload = function(event) {
      var csv = event.target.result;
      var data = jQuery.csv.toArrays(csv);
      alert(data);
      if (data && data.length > 0) {
        alert('Imported -' + data.length + '- rows successfully!');

        var output = '';

        for (var row in data) {
          for (var item in data[row]) {
            output += data[row][item] + ', ';
          }
        }
        alert(output);

      } else {
        alert('No data to import!');
      }
      $("input#field_50euu").val(output);
    };
    reader.onerror = function() {
      alert('Unable to read ' + file.fileName);
    };
  }
}
// };