Created
April 24, 2016 06:06
-
-
Save bollwyvl/7411ec83c37d29b08c7aa84472e93cad to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"cells": [ | |
{ | |
"cell_type": "code", | |
"execution_count": 30, | |
"metadata": { | |
"collapsed": false | |
}, | |
"outputs": [], | |
"source": [ | |
"import base64\n", | |
"\n", | |
"try:\n", | |
" from io import StringIO\n", | |
"except ImportError:\n", | |
" from StringIO import StringIO\n", | |
"\n", | |
"import pandas\n", | |
"\n", | |
"from traitlets import Unicode, Instance, observe\n", | |
"from ipywidgets import DOMWidget\n", | |
"from IPython import display" | |
] | |
}, | |
{ | |
"cell_type": "code", | |
"execution_count": 126, | |
"metadata": { | |
"collapsed": false | |
}, | |
"outputs": [ | |
{ | |
"data": { | |
"text/html": [ | |
"<style>\n", | |
" .uploader-widget{\n", | |
" border: dashed 2px grey;\n", | |
" opacity: 0.5;\n", | |
" background-color: #efefef;\n", | |
" color: grey;\n", | |
" position: relative;\n", | |
" }\n", | |
" .uploader-widget.uploader-dragged {\n", | |
" background-color: #333;\n", | |
" color: white;\n", | |
" }\n", | |
" .uploader-widget input{\n", | |
" opacity: 0;\n", | |
" width: 100%;\n", | |
" position: absolute;\n", | |
" width: 100%;\n", | |
" height: 100%;\n", | |
" top: 0;\n", | |
" }\n", | |
" .uploader-widget h3 {\n", | |
" text-align: center;\n", | |
" margin: 0;\n", | |
" padding: 20px;\n", | |
" }\n", | |
"</style>" | |
], | |
"text/plain": [ | |
"<IPython.core.display.HTML object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
} | |
], | |
"source": [ | |
"%%html\n", | |
"<style>\n", | |
" .uploader-widget{\n", | |
" border: dashed 2px grey;\n", | |
" opacity: 0.5;\n", | |
" background-color: #efefef;\n", | |
" color: grey;\n", | |
" position: relative;\n", | |
" }\n", | |
" .uploader-widget.uploader-dragged {\n", | |
" background-color: #333;\n", | |
" color: white;\n", | |
" }\n", | |
" .uploader-widget input{\n", | |
" opacity: 0;\n", | |
" width: 100%;\n", | |
" position: absolute;\n", | |
" width: 100%;\n", | |
" height: 100%;\n", | |
" top: 0;\n", | |
" }\n", | |
" .uploader-widget h3 {\n", | |
" text-align: center;\n", | |
" margin: 0;\n", | |
" padding: 20px;\n", | |
" }\n", | |
"</style>" | |
] | |
}, | |
{ | |
"cell_type": "code", | |
"execution_count": 127, | |
"metadata": { | |
"collapsed": false | |
}, | |
"outputs": [ | |
{ | |
"data": { | |
"application/javascript": [ | |
"require.undef(\"widget-uploader\")\n", | |
"define(\n", | |
"\"widget-uploader\",\n", | |
"[\n", | |
" \"underscore\",\n", | |
" \"jquery\",\n", | |
" \"nbextensions/widgets/widgets/js/widget\"\n", | |
"],\n", | |
"function(_, $, widget){\n", | |
" var UploaderView = widget.DOMWidgetView.extend({\n", | |
" className: \"uploader-widget\",\n", | |
" events: {\n", | |
" dragenter: \"onDragEnter\",\n", | |
" dragleave: \"onDragLeave\",\n", | |
" drop: \"onDrop\",\n", | |
" \"change input\": \"onChangeInput\"\n", | |
" },\n", | |
" \n", | |
" render: function(){\n", | |
" var that = this;\n", | |
"\n", | |
" this.$label = $(\"<h3/>\").appendTo(this.$el);\n", | |
"\n", | |
" this.$fileField = $(\"<input/>\", {type: \"file\"})\n", | |
" .appendTo(this.$el);\n", | |
"\n", | |
" this.update();\n", | |
" },\n", | |
" onChangeInput: function(){\n", | |
" this.setFile(this.$fileField[0].files[0]);\n", | |
" },\n", | |
" setFile: function(file){\n", | |
" var reader = new FileReader();\n", | |
"\n", | |
" reader.addEventListener(\"load\", _.bind(function(){\n", | |
" this.model.set(\"base64_data\", reader.result);\n", | |
" this.touch();\n", | |
" }, this), false);\n", | |
"\n", | |
" reader.readAsDataURL(file);\n", | |
" },\n", | |
" update: function() {\n", | |
" this.$label.text(this.model.get(\"label\"));\n", | |
" },\n", | |
" \n", | |
" onDragEnter: function(evt){ this.$el.addClass(\"uploader-dragged\"); console.log(evt);},\n", | |
" onDragLeave: function(evt){ this.$el.removeClass(\"uploader-dragged\"); console.log(evt);},\n", | |
" onDrop: function(evt){\n", | |
" evt.preventDefault();\n", | |
" evt.stopImmediatePropagation();\n", | |
" this.$el.removeClass(\"uploader-dragged\");\n", | |
" console.log(evt);\n", | |
" this.setFile(evt.originalEvent.dataTransfer.files[0]);\n", | |
" }\n", | |
" });\n", | |
" return {\n", | |
" UploaderView: UploaderView\n", | |
" }\n", | |
"});" | |
], | |
"text/plain": [ | |
"<IPython.core.display.Javascript object>" | |
] | |
}, | |
"metadata": {}, | |
"output_type": "display_data" | |
} | |
], | |
"source": [ | |
"%%javascript\n", | |
"require.undef(\"widget-uploader\")\n", | |
"define(\n", | |
"\"widget-uploader\",\n", | |
"[\n", | |
" \"underscore\",\n", | |
" \"jquery\",\n", | |
" \"nbextensions/widgets/widgets/js/widget\"\n", | |
"],\n", | |
"function(_, $, widget){\n", | |
" var UploaderView = widget.DOMWidgetView.extend({\n", | |
" className: \"uploader-widget\",\n", | |
" events: {\n", | |
" dragenter: \"onDragEnter\",\n", | |
" dragleave: \"onDragLeave\",\n", | |
" drop: \"onDrop\",\n", | |
" \"change input\": \"onChangeInput\"\n", | |
" },\n", | |
" \n", | |
" render: function(){\n", | |
" var that = this;\n", | |
"\n", | |
" this.$label = $(\"<h3/>\").appendTo(this.$el);\n", | |
"\n", | |
" this.$fileField = $(\"<input/>\", {type: \"file\"})\n", | |
" .appendTo(this.$el);\n", | |
"\n", | |
" this.update();\n", | |
" },\n", | |
" onChangeInput: function(){\n", | |
" this.setFile(this.$fileField[0].files[0]);\n", | |
" },\n", | |
" setFile: function(file){\n", | |
" var reader = new FileReader();\n", | |
"\n", | |
" reader.addEventListener(\"load\", _.bind(function(){\n", | |
" this.model.set(\"base64_data\", reader.result);\n", | |
" this.touch();\n", | |
" }, this), false);\n", | |
"\n", | |
" reader.readAsDataURL(file);\n", | |
" },\n", | |
" update: function() {\n", | |
" this.$label.text(this.model.get(\"label\"));\n", | |
" },\n", | |
" \n", | |
" onDragEnter: function(evt){ this.$el.addClass(\"uploader-dragged\"); console.log(evt);},\n", | |
" onDragLeave: function(evt){ this.$el.removeClass(\"uploader-dragged\"); console.log(evt);},\n", | |
" onDrop: function(evt){\n", | |
" evt.preventDefault();\n", | |
" evt.stopImmediatePropagation();\n", | |
" this.$el.removeClass(\"uploader-dragged\");\n", | |
" console.log(evt);\n", | |
" this.setFile(evt.originalEvent.dataTransfer.files[0]);\n", | |
" }\n", | |
" });\n", | |
" return {\n", | |
" UploaderView: UploaderView\n", | |
" }\n", | |
"});\n" | |
] | |
}, | |
{ | |
"cell_type": "code", | |
"execution_count": 144, | |
"metadata": { | |
"collapsed": false | |
}, | |
"outputs": [], | |
"source": [ | |
"class BaseUploaderWidget(DOMWidget):\n", | |
" _view_module = Unicode(\"widget-uploader\").tag(sync=True)\n", | |
" _view_name = Unicode(\"UploaderView\").tag(sync=True)\n", | |
" base64_data = Unicode().tag(sync=True)\n", | |
" label = Unicode(\"Upload a File\").tag(sync=True)\n", | |
" \n", | |
" @observe(\"base64_data\")\n", | |
" def _update_label(self, change):\n", | |
" self.label = self._label() or self.label\n", | |
" \n", | |
" def _label(self):\n", | |
" return \"{} bytes uploaded {}\".format(\n", | |
" len(self.base64_data),\n", | |
" self.base64_data.split(\";\")[0])\n", | |
"\n", | |
"uploader = BaseUploaderWidget()\n", | |
"uploader" | |
] | |
}, | |
{ | |
"cell_type": "code", | |
"execution_count": 147, | |
"metadata": { | |
"collapsed": false | |
}, | |
"outputs": [], | |
"source": [ | |
"class CSVUploader(BaseUploaderWidget):\n", | |
" dataframe = Instance(klass=pandas.DataFrame, allow_none=True)\n", | |
" label = Unicode(\"Upload a CSV File\").tag(sync=True)\n", | |
" \n", | |
" def _label(self):\n", | |
" self.label = \"{} rows by {} columns\".format(\n", | |
" len(self.dataframe),\n", | |
" len(self.dataframe.columns),\n", | |
" )\n", | |
"\n", | |
" @observe(\"base64_data\")\n", | |
" def _update_dataframe(self, new):\n", | |
" csv = StringIO()\n", | |
" csv.write(u\"{}\".format(base64.decodestring(self.base64_data.split(\",\")[1])))\n", | |
" csv.seek(0)\n", | |
" self.dataframe = pandas.read_csv(csv)" | |
] | |
}, | |
{ | |
"cell_type": "code", | |
"execution_count": 148, | |
"metadata": { | |
"collapsed": false | |
}, | |
"outputs": [], | |
"source": [ | |
"csv = CSVUploader()\n", | |
"csv" | |
] | |
}, | |
{ | |
"cell_type": "code", | |
"execution_count": 149, | |
"metadata": { | |
"collapsed": false | |
}, | |
"outputs": [ | |
{ | |
"data": { | |
"text/html": [ | |
"<div>\n", | |
"<table border=\"1\" class=\"dataframe\">\n", | |
" <thead>\n", | |
" <tr style=\"text-align: right;\">\n", | |
" <th></th>\n", | |
" <th>id</th>\n", | |
" <th>x</th>\n", | |
" </tr>\n", | |
" </thead>\n", | |
" <tbody>\n", | |
" <tr>\n", | |
" <th>0</th>\n", | |
" <td>0</td>\n", | |
" <td>1</td>\n", | |
" </tr>\n", | |
" <tr>\n", | |
" <th>1</th>\n", | |
" <td>1</td>\n", | |
" <td>2</td>\n", | |
" </tr>\n", | |
" </tbody>\n", | |
"</table>\n", | |
"</div>" | |
], | |
"text/plain": [ | |
" id x\n", | |
"0 0 1\n", | |
"1 1 2" | |
] | |
}, | |
"execution_count": 149, | |
"metadata": {}, | |
"output_type": "execute_result" | |
} | |
], | |
"source": [ | |
"csv.dataframe" | |
] | |
} | |
], | |
"metadata": { | |
"anaconda-cloud": {}, | |
"kernelspec": { | |
"display_name": "Python [foo]", | |
"language": "python", | |
"name": "Python [foo]" | |
}, | |
"language_info": { | |
"codemirror_mode": { | |
"name": "ipython", | |
"version": 2 | |
}, | |
"file_extension": ".py", | |
"mimetype": "text/x-python", | |
"name": "python", | |
"nbconvert_exporter": "python", | |
"pygments_lexer": "ipython2", | |
"version": "2.7.11" | |
} | |
}, | |
"nbformat": 4, | |
"nbformat_minor": 0 | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment