Question

178

Automatically import a local CSV file with Javascript or Jquery

rated 0 times [ 179] [ 1] / answers: 1 / hits: 26994 / 10 Years ago, wed, june 11, 2014, 12:00:00

My client wants a website that includes importing CSV data WITHOUT it being hosted on a server. The idea is so that their sales people can demonstrate their products without having web access or hosting set up on their PCs. They will also be able to update the data by exporting a new CSV file from the original Excel document, without any knowledge of HTML or Javascript.

I've found quite a few solutions online - like Papa Parse (http://papaparse.com/) but all of them require the user to select a file using <input type=file />. As an example, the following script, using Papa Parse, works perfectly well:

<!doctype html>

<html>

<head>

<meta charset=utf-8>

<title>Test CSV</title>

</head>

<body>

  <input type=file />

</body>

<script src=js/jquery-1.10.1.min.js></script>

<script src=js/jquery.parse.min.js></script>

<script language=javascript>

  $('input').change(function(e) {

    $('input[type=file]').parse({

        complete: function(data) {

            console.log('Parse results:', data.results);

        }

    });

});

</script>

</html>

My problem is that I need to be able to hard-code the CSV file's location so that, when the web page is opened, the data is automatically displayed, without any further interaction by the user. Is this possible? Or have I overlooked something really basic?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

gavenmekhio

Add To Favorites

Follow

Total Points: 732

Total Questions: 89

Total Answers: 93

Location: Central African Republic

Member since Mon, Aug 10, 2020

4 Years ago

answered 10 Years ago donovanjasek · Accepted Answer

Hardcode the values inside a script tag of a non-javascript type such as text/csv then extract it with innerHTML or $(#unparsed).html()

<script type=text/csv id=unparsed>

    url,title,size

    images/address-book.png?1354486198, Address Book, 1904 KB

    images/front-row.png?1354486198, Front Row, 401 KB

    images/google-pokemon.png?1354486198, Google Pokémon, 12875 KB

    ...

</script>



$(function parseData(){

    $(#file).hide();

    var data = $(#unparsed).html();

    var parsed = $.parse(data);

    $(#parsed).val(JSON.stringify(parsed));

})

http://jsbin.com/racanefi/10/edit

Hardcode the values inside a textarea.

$(function parseData(){

  $(#file).hide();

  var data = $(#unparsed).val();

  var parsed = $.parse(data);

  $(#parsed).val(JSON.stringify(parsed));

})

http://jsbin.com/racanefi/8/edit

OR

Store the value in localStorage.

var storage = localStorage;

var key = 'unparsed_text_file';



function getFile(){

$(#file).change(function(){

  var file = $(this).eq(0)[0].files[0],

    reader = new FileReader();

    reader.onload = function(e) {

      var text = reader.result;

      storage.setItem(key,text);

      parseData();

    };

    reader.readAsText(file);

});

}



function parseData(){

  $(#file).hide();

  var data = storage.getItem(key);

  var parsed = $.parse(data);

  $(#unparsed).val(data);

  $(#parsed).val(JSON.stringify(parsed));

}



if(storage.getItem(key))

  parseData();

else

  getFile();

http://jsbin.com/racanefi/6/edit

Browser Compatibility:
http://caniuse.com/namevalue-storage

This is a rough draft, you should probably QA it well before implementing it.

edit: I had it backwards sessionStorage is temporary across sessions. localStorage is more permanent. I created a variable that lets you assign your storage to a var storage