Skip to content

Instantly share code, notes, and snippets.

@texodus

texodus/.block

Forked from JHawk/.block
Last active Sep 21, 2020
Embed
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) {
e.preventDefault();
e.stopPropagation();
}
// 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() {
dropArea.classList.add("highlight");
}
// Remove class for highlighting drop area.
function unhighlight() {
dropArea.classList.remove("highlight");
}
// Add event listener for drop.
dropArea.addEventListener("drop", handleDrop, false);
// Add event listener for file change on `input`.
input.addEventListener("change", function() {
handleFiles(this.files);
});
// Handle files attached to the drop.
function handleDrop(e) {
let dt = e.dataTransfer;
let files = dt.files;
handleFiles(files);
}
// Iterate over files and call upload on each.
function handleFiles(files) {
[...files].forEach(uploadFile);
}
// 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 = fileLoadedEvent.target.result;
// Remove the `dropArea` from the DOM.
const parent = dropArea.parentElement;
parent.removeChild(dropArea);
// Create a `<perspective-viewer>` and append it to the DOM.
let psp = document.createElement("perspective-viewer");
parent.appendChild(psp);
// Load the CSV data into `<perspective-viewer>`.
psp.load(txt);
};
// Read the contents of the CSV - triggering the onload when finished.
reader.readAsText(file);
}
});
#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>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script src="https://cdn.jsdelivr.net/npm/@finos/perspective/dist/umd/perspective.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer/dist/umd/perspective-viewer.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-datagrid"></script>
<script src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-d3fc"></script>
<script src="csv.js"></script>
<link rel='stylesheet' href="index.css">
<link rel='stylesheet' href="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer/dist/umd/material-dense.css" is="custom-style">
</head>
<body>
<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>
</form>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment