examples/widgets/File Upload Widget.ipynb

{
 "metadata": {
  "cell_tags": [
   [
    "<None>",
    null
   ]
  ],
  "name": ""
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from __future__ import print_function # py 2.7 compat\n",
      "\n",
      "import base64\n",
      "from IPython.html import widgets # Widget definitions\n",
      "from IPython.display import display # Used to display widgets in the notebook"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 1
    },
    {
     "cell_type": "heading",
     "level": 1,
     "metadata": {},
     "source": [
      "Custom Widget"
     ]
    },
    {
     "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": 2
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%javascript\n",
      "\n",
      "require([\"notebook/js/widget\"], function(){\n",
      "    \n",
      "    // Define the FileModel and register it with the widget manager.\n",
      "    var FileModel = IPython.WidgetModel.extend({});\n",
      "    IPython.widget_manager.register_widget_model('FileWidgetModel', FileModel);\n",
      "    \n",
      "    // Define the FilePickerView\n",
      "    var FilePickerView = IPython.WidgetView.extend({\n",
      "        \n",
      "        render: function(){\n",
      "            var that = this;\n",
      "            this.$el = $('<input />')\n",
      "                .attr('type', 'file')\n",
      "                .change(function(evt){ that.handleFileChange(evt) });\n",
      "        },\n",
      "        \n",
      "        // Handles: User input\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",
      "            } else {\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.widget_manager.register_widget_view('FilePickerView', FilePickerView);\n",
      "});"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "javascript": [
        "\n",
        "require([\"notebook/js/widget\"], function(){\n",
        "    \n",
        "    // Define the FileModel and register it with the widget manager.\n",
        "    var FileModel = IPython.WidgetModel.extend({});\n",
        "    IPython.widget_manager.register_widget_model('FileWidgetModel', FileModel);\n",
        "    \n",
        "    // Define the FilePickerView\n",
        "    var FilePickerView = IPython.WidgetView.extend({\n",
        "        \n",
        "        render: function(){\n",
        "            var that = this;\n",
        "            this.$el = $('<input />')\n",
        "                .attr('type', 'file')\n",
        "                .change(function(evt){ that.handleFileChange(evt) });\n",
        "        },\n",
        "        \n",
        "        // Handles: User input\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",
        "            } else {\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.widget_manager.register_widget_view('FilePickerView', FilePickerView);\n",
        "});"
       ],
       "metadata": {},
       "output_type": "display_data",
       "text": [
        "<IPython.core.display.Javascript at 0x7f14f1c78cd0>"
       ]
      }
     ],
     "prompt_number": 3
    },
    {
     "cell_type": "heading",
     "level": 1,
     "metadata": {},
     "source": [
      "Usage"
     ]
    },
    {
     "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: Hello World!\n",
        "\n"
       ]
      }
     ],
     "prompt_number": 4
    }
   ],
   "metadata": {}
  }
 ]
}