ipywidgets file input widget (not working).ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Objective:\n",
    "- Create a file upload widget based on the [ipywidgets custom widget seen in the docs](https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Custom.html).\n",
    "\n",
    "- Ideally a user would inititalize this widget, display it, then select thier files that list of files would then be availible to access through jupyter notebook.\n",
    "\n",
    "# Basic HTML mock-up"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<input id='myinput' type='file' multiple = true onchange='showfiles(this)'/>\n",
       "\n",
       "<script>\n",
       "function showfiles(myinput) {\n",
       "    if (myinput.files.length == 0) {\n",
       "        console.log('None selected')\n",
       "    } \n",
       "    else {\n",
       "        var i;\n",
       "        for (i = 0; i < myinput.files.length; i++) {\n",
       "            console.log(myinput.files[i].name)\n",
       "        }\n",
       "    }\n",
       "}\n",
       "</script>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%HTML\n",
    "<input id='myinput' type='file' multiple = true onchange='showfiles(this)'/>\n",
    "\n",
    "<script>\n",
    "function showfiles(myinput) {\n",
    "    if (myinput.files.length == 0) {\n",
    "        console.log('None selected')\n",
    "    } \n",
    "    else {\n",
    "        var i;\n",
    "        for (i = 0; i < myinput.files.length; i++) {\n",
    "            console.log(myinput.files[i].name)\n",
    "        }\n",
    "    }\n",
    "}\n",
    "</script>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Custom widget"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from ipywidgets import widgets\n",
    "from IPython.display import display\n",
    "from traitlets import Unicode, validate\n",
    "from ipywidgets.widgets.widget_string import _String\n",
    "\n",
    "class FilesInputWidget(_String):\n",
    "    _view_name = Unicode('FilesInputView').tag(sync=True)\n",
    "    _view_module = Unicode('FilesInputModel').tag(sync=True)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "require.undef('FilesInputModel');\n",
       "\n",
       "define('FilesInputModel', [\"@jupyter-widgets/base\"], function(widgets) {\n",
       "    var FilesInputView = widgets.DescriptionView.extend({\n",
       "        render: function() {\n",
       "            this.textbox = document.createElement('input')\n",
       "            this.textbox.setAttribute('type', 'file')\n",
       "            this.textbox.setAttribute('multiple', 'true')\n",
       "            this.textbox.setAttribute('onchange', this.showfiles())\n",
       "            this.el.appendChild(this.textbox)\n",
       "\n",
       "        },\n",
       "        showfiles : function() {\n",
       "            if (this.textbox.files.length == 0) {\n",
       "                console.log('None selected')\n",
       "            }\n",
       "            else {\n",
       "                var i;\n",
       "                for (i=0; i < this.textbox.files.length; i++) {\n",
       "                    console.log(this.textbox.files[i].name)\n",
       "                }\n",
       "            }\n",
       "        },\n",
       "        });\n",
       "    return {\n",
       "        FilesInputView : FilesInputView\n",
       "    };\n",
       "});\n"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\n",
    "require.undef('FilesInputModel');\n",
    "\n",
    "define('FilesInputModel', [\"@jupyter-widgets/base\"], function(widgets) {\n",
    "    var FilesInputView = widgets.DescriptionView.extend({\n",
    "        render: function() {\n",
    "            this.textbox = document.createElement('input')\n",
    "            this.textbox.setAttribute('type', 'file')\n",
    "            this.textbox.setAttribute('multiple', 'true')\n",
    "            this.textbox.setAttribute('onchange', this.showfiles())\n",
    "            this.el.appendChild(this.textbox)\n",
    "\n",
    "        },\n",
    "        showfiles : function() {\n",
    "            if (this.textbox.files.length == 0) {\n",
    "                console.log('None selected')\n",
    "            }\n",
    "            else {\n",
    "                var i;\n",
    "                for (i=0; i < this.textbox.files.length; i++) {\n",
    "                    console.log(this.textbox.files[i].name)\n",
    "                }\n",
    "            }\n",
    "        },\n",
    "        });\n",
    "    return {\n",
    "        FilesInputView : FilesInputView\n",
    "    };\n",
    "});\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "907a198587964da284f4c211771cdd30",
       "version_major": "2",
       "version_minor": "0"
      },
      "text/plain": [
       "A Jupyter Widget"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "FilesInputWidget()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Problem\n",
    "\n",
    "- Why is the file list not emitting to the console?\n",
    "- In fact the only change is registered through by the console is when the widget is initialized. What needs to be done to make the `onchange` attribute work?"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.0"
  },
  "varInspector": {
   "cols": {
    "lenName": 16,
    "lenType": 16,
    "lenVar": 40
   },
   "kernels_config": {
    "python": {
     "delete_cmd_postfix": "",
     "delete_cmd_prefix": "del ",
     "library": "var_list.py",
     "varRefreshCmd": "print(var_dic_list())"
    },
    "r": {
     "delete_cmd_postfix": ") ",
     "delete_cmd_prefix": "rm(",
     "library": "var_list.r",
     "varRefreshCmd": "cat(var_dic_list()) "
    }
   },
   "types_to_exclude": [
    "module",
    "function",
    "builtin_function_or_method",
    "instance",
    "_Feature"
   ],
   "window_display": false
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}