From 21bbba7a32725ba658fd3f995705dbb04bba1101 Mon Sep 17 00:00:00 2001
From: texodus <steinlink@gmail.com>
Date: Tue, 5 Jun 2018 16:11:25 -0400
Subject: [PATCH] Added an example of loading a CSV client side

---
 README.md                                     |   2 +-
 .../perspective-examples/src/html/csv.html    | 151 ++++++++++++++++++
 2 files changed, 152 insertions(+), 1 deletion(-)
 create mode 100644 packages/perspective-examples/src/html/csv.html
diff --git a/README.md b/README.md
index 5c7048953f..8c0e4a8068 100644
--- a/README.md
+++ b/README.md
@@ -30,11 +30,11 @@ simple to build real-time & user configurable analytics entirely in the browser.
 * [streaming.html](https://unpkg.com/@jpmorganchase/perspective-examples/build/streaming.html) A streaming random data demo.
 * [coincap.html](https://unpkg.com/@jpmorganchase/perspective-examples/build/coincap.html) Streaming crypto currency prices via [Coincap.io](http://coincap.io/).
 * [theme-material.html](https://unpkg.com/@jpmorganchase/perspective-examples/build/theme-material.html) Material theme example.
+* [csv.html](https://unpkg.com/@jpmorganchase/perspective-examples/build/csv.html) Upload a CSV of your own.
 
 ## Documentation
 
 * [Project Site](https://jpmorganchase.github.io/perspective/)
-
 * [Installation](https://jpmorganchase.github.io/perspective/docs/installation.html)
 * [User's Guide](https://jpmorganchase.github.io/perspective/docs/usage.html)
 * [Perspective API](https://jpmorganchase.github.io/perspective/docs/perspective_api.html)
diff --git a/packages/perspective-examples/src/html/csv.html b/packages/perspective-examples/src/html/csv.html
new file mode 100644
index 0000000000..bef2fb24f3
--- /dev/null
+++ b/packages/perspective-examples/src/html/csv.html
@@ -0,0 +1,151 @@
+<!--
+   
+   Copyright (c) 2017, the Perspective Authors.
+   
+   This file is part of the Perspective library, distributed under the terms of
+   the Apache License 2.0.  The full license can be found in the LICENSE file.
+
+-->
+
+<!DOCTYPE html>
+<html>
+    <head>
+
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
+
+        <script src="mobile_fix.js"></script>
+        <script src="perspective.view.js"></script>
+        <script src="hypergrid.plugin.js"></script>
+        <script src="highcharts.plugin.js"></script>
+
+        <link rel='stylesheet' href="demo.css">
+        <link rel='stylesheet' href="material.css">
+
+        <style>
+
+            #drop-area {
+                border: 1px solid #ccc;
+                width: 480px;
+                font-family: sans-serif;
+                margin: 100px auto;
+                padding: 48px;
+            }
+            #drop-area.highlight {
+                border-color: purple;
+            }
+            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;
+                border: 1px solid #ccc;
+            }
+            .button:hover {
+                background: #ddd;
+            }
+            #fileElem {
+                display: none;
+            }
+        </style>
+
+    </head>
+    <body>
+
+        <!-- <perspective-viewer>
+                
+        </perspective-viewer> -->
+
+        <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" onchange="handleFiles(this.files)">
+              <label class="button" for="fileElem">Select a file</label>
+            </form>
+        </div>
+
+        <script>
+
+            window.addEventListener('WebComponentsReady', function () {
+                var dropArea = document.getElementById('drop-area')
+
+                dropArea.addEventListener('dragenter', () => {}, false);
+                dropArea.addEventListener('dragleave', () => {}, false);
+                dropArea.addEventListener('dragover', () => {}, false);
+                dropArea.addEventListener('drop', x => {
+                    console.log(x);
+                }, false);
+                
+                ;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+                    dropArea.addEventListener(eventName, preventDefaults, false)
+                })
+
+                function preventDefaults (e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+
+                ;['dragenter', 'dragover'].forEach(eventName => {
+                    dropArea.addEventListener(eventName, highlight, false)
+                })
+
+                ;['dragleave', 'drop'].forEach(eventName => {
+                    dropArea.addEventListener(eventName, unhighlight, false)
+                })
+
+                function highlight(e) {
+                    dropArea.classList.add('highlight')
+                }
+
+                function unhighlight(e) {
+                    dropArea.classList.remove('highlight')
+                }
+
+                dropArea.addEventListener('drop', handleDrop, false)
+
+                function handleDrop(e) {
+                    let dt = e.dataTransfer
+                    let files = dt.files
+
+                    handleFiles(files)
+                }
+
+                function handleFiles(files) {
+                    ([...files]).forEach(uploadFile)
+                }
+
+                function uploadFile(file) {
+                    let reader = new FileReader();
+                    reader.onload = function (fileLoadedEvent) {
+                        let txt = fileLoadedEvent.target.result;
+                        const parent = dropArea.parentElement;
+                        parent.removeChild(dropArea);
+                        let psp = document.createElement('perspective-viewer');
+                        parent.appendChild(psp);
+                        psp.load(txt);
+                    }
+                    reader.readAsText(file);
+                }
+                // document.getElementsByTagName('perspective-viewer')[0].load(xhr.response); 
+            });
+
+        </script>
+
+    </body>
+</html>
