From 3d7eba3143c13775ad4f6a3242c69ba30a05faec 2014-01-16 10:56:59 From: Jonathan Frederic Date: 2014-01-16 10:56:59 Subject: [PATCH] Added File Upload Widget example for Chris Kees --- diff --git a/examples/widgets/File Upload Widget.ipynb b/examples/widgets/File Upload Widget.ipynb new file mode 100644 index 0000000..2110e09 --- /dev/null +++ b/examples/widgets/File Upload Widget.ipynb @@ -0,0 +1,292 @@ +{ + "metadata": { + "cell_tags": [ + [ + "", + null + ] + ], + "name": "" + }, + "nbformat": 3, + "nbformat_minor": 0, + "worksheets": [ + { + "cells": [ + { + "cell_type": "code", + "collapsed": false, + "input": [ + "from IPython.html import widgets # Widget definitions\n", + "from IPython.display import display # Used to display widgets in the notebook\n", + "\n", + "# Enable widgets in this notebook\n", + "widgets.init_widget_js()" + ], + "language": "python", + "metadata": {}, + "outputs": [ + { + "javascript": [ + "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/button.js\");" + ], + "metadata": {}, + "output_type": "display_data" + }, + { + "javascript": [ + "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/int_range.js\");" + ], + "metadata": {}, + "output_type": "display_data" + }, + { + "javascript": [ + "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/string.js\");" + ], + "metadata": {}, + "output_type": "display_data" + }, + { + "javascript": [ + "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/multicontainer.js\");" + ], + "metadata": {}, + "output_type": "display_data" + }, + { + "javascript": [ + "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/bool.js\");" + ], + "metadata": {}, + "output_type": "display_data" + }, + { + "javascript": [ + "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/int.js\");" + ], + "metadata": {}, + "output_type": "display_data" + }, + { + "javascript": [ + "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/selection.js\");" + ], + "metadata": {}, + "output_type": "display_data" + }, + { + "javascript": [ + "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/float.js\");" + ], + "metadata": {}, + "output_type": "display_data" + }, + { + "javascript": [ + "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/float_range.js\");" + ], + "metadata": {}, + "output_type": "display_data" + }, + { + "javascript": [ + "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/container.js\");" + ], + "metadata": {}, + "output_type": "display_data" + } + ], + "prompt_number": 22 + }, + { + "cell_type": "code", + "collapsed": false, + "input": [ + "# Import the base Widget class and the traitlets Unicode class.\n", + "from IPython.html.widgets import Widget\n", + "from IPython.utils.traitlets import Unicode, Int\n", + "\n", + "# Define our FileWidget and its target model and default view.\n", + "class FileWidget(Widget):\n", + " target_name = Unicode('FileWidgetModel')\n", + " default_view_name = Unicode('FilePickerView')\n", + " \n", + " # Define the custom state properties to sync with the front-end\n", + " _keys = ['value', 'filename']\n", + " value = Unicode('')\n", + " filename = Unicode('')\n", + " on_failed = Int(0)" + ], + "language": "python", + "metadata": {}, + "outputs": [], + "prompt_number": 23 + }, + { + "cell_type": "code", + "collapsed": false, + "input": [ + "%%javascript\n", + "\n", + "require([\"notebook/js/widget\"], function(){\n", + " \n", + " // Define the DateModel and register it with the widget manager.\n", + " var FileModel = IPython.WidgetModel.extend({});\n", + " IPython.notebook.widget_manager.register_widget_model('FileWidgetModel', FileModel);\n", + " \n", + " // Define the DatePickerView\n", + " var FilePickerView = IPython.WidgetView.extend({\n", + " \n", + " render: function(){\n", + " var that = this;\n", + " this.$el = $('')\n", + " .attr('type', 'file')\n", + " .change(function(evt){ that.handleFileChange(evt) });\n", + " },\n", + " \n", + " // Handles: User input\n", + " events: { \"change\" : \"handleFileChange\" }, \n", + " handleFileChange: function(evt) { \n", + " \n", + " //Retrieve the first (and only!) File from the FileList object\n", + " var that = this;\n", + " var f = evt.target.files[0];\n", + " if (f) {\n", + " var r = new FileReader();\n", + " r.onload = function(e) {\n", + " that.model.set('value', e.target.result);\n", + " that.model.update_other_views(that);\n", + " }\n", + " r.readAsText(f);\n", + " }\n", + " else\n", + " {\n", + " this.model.set('on_failed', this.model.get('on_failed') + 1);\n", + " this.model.update_other_views(this);\n", + " }\n", + " this.model.set('filename', f.name);\n", + " this.model.update_other_views(this);\n", + " },\n", + " });\n", + " \n", + " // Register the DatePickerView with the widget manager.\n", + " IPython.notebook.widget_manager.register_widget_view('FilePickerView', FilePickerView);\n", + "});" + ], + "language": "python", + "metadata": {}, + "outputs": [ + { + "javascript": [ + "\n", + "require([\"notebook/js/widget\"], function(){\n", + " \n", + " // Define the DateModel and register it with the widget manager.\n", + " var FileModel = IPython.WidgetModel.extend({});\n", + " IPython.notebook.widget_manager.register_widget_model('FileWidgetModel', FileModel);\n", + " \n", + " // Define the DatePickerView\n", + " var FilePickerView = IPython.WidgetView.extend({\n", + " \n", + " render: function(){\n", + " var that = this;\n", + " this.$el = $('')\n", + " .attr('type', 'file')\n", + " .change(function(evt){ that.handleFileChange(evt) });\n", + " },\n", + " \n", + " // Handles: User input\n", + " events: { \"change\" : \"handleFileChange\" }, \n", + " handleFileChange: function(evt) { \n", + " \n", + " //Retrieve the first (and only!) File from the FileList object\n", + " var that = this;\n", + " var f = evt.target.files[0];\n", + " if (f) {\n", + " var r = new FileReader();\n", + " r.onload = function(e) {\n", + " that.model.set('value', e.target.result);\n", + " that.model.update_other_views(that);\n", + " }\n", + " r.readAsText(f);\n", + " }\n", + " else\n", + " {\n", + " this.model.set('on_failed', this.model.get('on_failed') + 1);\n", + " this.model.update_other_views(this);\n", + " }\n", + " this.model.set('filename', f.name);\n", + " this.model.update_other_views(this);\n", + " },\n", + " });\n", + " \n", + " // Register the DatePickerView with the widget manager.\n", + " IPython.notebook.widget_manager.register_widget_view('FilePickerView', FilePickerView);\n", + "});" + ], + "metadata": {}, + "output_type": "display_data", + "text": [ + "" + ] + } + ], + "prompt_number": 24 + }, + { + "cell_type": "code", + "collapsed": false, + "input": [ + "file_widget = FileWidget()\n", + "display(file_widget)\n", + "\n", + "def file_loading():\n", + " print \"Loading %s\" % file_widget.filename\n", + "\n", + "def file_loaded():\n", + " print \"Loaded, file contents: %s\" % file_widget.value\n", + "\n", + "def file_failed(name, old_value, new_value):\n", + " if new_value > old_value:\n", + " print \"Could not load file contents of %s\" % file_widget.filename\n", + "\n", + "\n", + "file_widget.on_trait_change(file_loading, 'filename')\n", + "file_widget.on_trait_change(file_loaded, 'value')\n", + "file_widget.on_trait_change(file_failed, 'on_failed')" + ], + "language": "python", + "metadata": {}, + "outputs": [ + { + "output_type": "stream", + "stream": "stdout", + "text": [ + "Loading test.txt\n" + ] + }, + { + "output_type": "stream", + "stream": "stdout", + "text": [ + "Loaded, file contents: \n", + "hello world!\n" + ] + } + ], + "prompt_number": 25 + }, + { + "cell_type": "code", + "collapsed": false, + "input": [], + "language": "python", + "metadata": {}, + "outputs": [] + } + ], + "metadata": {} + } + ] +} \ No newline at end of file