Menu
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?
666
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
186
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
