Skip to content

Instantly share code, notes, and snippets.

@bollwyvl

bollwyvl/Uploader Widget.ipynb

Created April 24, 2016 06:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bollwyvl/7411ec83c37d29b08c7aa84472e93cad to your computer and use it in GitHub Desktop.
Save bollwyvl/7411ec83c37d29b08c7aa84472e93cad to your computer and use it in GitHub Desktop.
Download ZIP
Display the source blob
Display the rendered blob
Raw
Uploader Widget.ipynb
{
"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