Skip to content

Instantly share code, notes, and snippets.



Forked from JHawk/.block
Last active Sep 21, 2020
What would you like to do?
Perspective CSV Example
license: apache-2.0
window.addEventListener("WebComponentsReady", function() {
// Get `dropArea` element from the DOM.
var dropArea = document.getElementById("drop-area");
// Get `input` element from the DOM.
var input = document.getElementById("fileElem");
// Add event listeners to `dropArea`.
dropArea.addEventListener("dragenter", () => {}, false);
dropArea.addEventListener("dragleave", () => {}, false);
dropArea.addEventListener("dragover", () => {}, false);
dropArea.addEventListener("drop", x => console.log(x), false);
// Prevent defaults for drag / drop events.
["dragenter", "dragover", "dragleave", "drop"].forEach(eventName => {
dropArea.addEventListener(eventName, preventDefaults, false);
function preventDefaults(e) {
// Highlight `dropArea` on drag enter and over.
["dragenter", "dragover"].forEach(function(eventName) {
dropArea.addEventListener(eventName, highlight, false);
// Remove highlight `dropArea` on drag leave and drop.
["dragleave", "drop"].forEach(function(eventName) {
dropArea.addEventListener(eventName, unhighlight, false);
// Add class for highlighting drop area.
function highlight() {
// Remove class for highlighting drop area.
function unhighlight() {
// Add event listener for drop.
dropArea.addEventListener("drop", handleDrop, false);
// Add event listener for file change on `input`.
input.addEventListener("change", function() {
// Handle files attached to the drop.
function handleDrop(e) {
let dt = e.dataTransfer;
let files = dt.files;
// Iterate over files and call upload on each.
function handleFiles(files) {
// On file load, remove the `dropArea` and replace it with a `<perspective-viewer>`.
function uploadFile(file) {
let reader = new FileReader();
reader.onload = function(fileLoadedEvent) {
let txt =;
// Remove the `dropArea` from the DOM.
const parent = dropArea.parentElement;
// Create a `<perspective-viewer>` and append it to the DOM.
let psp = document.createElement("perspective-viewer");
// Load the CSV data into `<perspective-viewer>`.
// Read the contents of the CSV - triggering the onload when finished.
#drop-area {
border: 5px dashed #ccc;
border-radius: 15px;
width: 480px;
font-family: sans-serif;
margin: 100px auto;
padding: 48px;
color: #666;
#drop-area.highlight {
border-color: cornflowerblue;
color: #000;
p {
margin-top: 0;
.my-form {
margin-bottom: 10px;
#gallery {
margin-top: 10px;
#gallery img {
width: 150px;
margin-bottom: 10px;
margin-right: 10px;
vertical-align: middle;
.button {
display: inline-block;
padding: 10px;
background: #ccc;
cursor: pointer;
border-radius: 5px;
.button:hover {
background: cornflowerblue;
color: white;
#fileElem {
display: none;
perspective-viewer {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src="csv.js"></script>
<link rel='stylesheet' href="index.css">
<link rel='stylesheet' href="" is="custom-style">
<div id="drop-area">
<form class="my-form">
<p>Upload a CSV file by dragging from your desktop and dropping onto the dashed region.</p>
<p>(Data is processed in browser, and never sent to any server).</p>
<input type="file" id="fileElem" multiple accept="text/csv">
<label class="button" for="fileElem">Select a file</label>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment