Skip to content

Instantly share code, notes, and snippets.

@johnvilsack

johnvilsack/ClientSide CSV Rendering (Drag and Drop) Version

Created July 23, 2015 16:03
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save johnvilsack/ea991a2645c53209fd4e to your computer and use it in GitHub Desktop.
Save johnvilsack/ea991a2645c53209fd4e to your computer and use it in GitHub Desktop.
Download ZIP
Drag and drop target that uses Papaparse to read a JSON file into an object; all client side.
Raw
ClientSide CSV Rendering (Drag and Drop) Version
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
html {margin-top:40px;}
</style>
</head>
<body>
<div class="container">
<div class=col-lg-12>
<div id="drop_zone" class="well"><center><h1>Drop Your CSV Here</h1></center></div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//epoch.app/po/papaparse.min.js"></script>
<script>
$.PAYLOAD = new Object();
function handleFileSelect(evt) {
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files;
console.log('Caught a File!');
doUpload(files[0]);
console.log($.PAYLOAD);
}
function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
}
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);
function doUpload(e) {
console.log('attempt');
Papa.parse(e, {
config: {
header:true
},
before: function(file, inputElem){ console.log('Attempting to Parse...')},
error: function(err, file, inputElem, reason){ console.log(err); },
complete: function(results, file){ $.PAYLOAD = results; }
});
}
</script>
</body>
</html>
@jstensved
Copy link

Thanks! Btw, no need for the config-element, just write header: true;

@chrismelbourne
Copy link

Just in case it helps anyone, modifying the doUpload(e) worked for me with the current version of Papaparse:

  1. the "header" property needs to be at the top level of the config object
  2. the "before" property seems to have been deprecated so I removed it.
	function doUpload(e) { 
		console.log('attempt');
		Papa.parse(e, {
			config: {
			header:true,
			error: function(err, file, inputElem, reason){ console.log(err); },
			complete: function(results, file){ $.PAYLOAD = results; }
		});
	}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment