##// END OF EJS Templates
Added File Upload Widget example for Chris Kees
Jonathan Frederic -
Show More
@@ -0,0 +1,292 b''
1 {
2 "metadata": {
3 "cell_tags": [
4 [
5 "<None>",
6 null
7 ]
8 ],
9 "name": ""
10 },
11 "nbformat": 3,
12 "nbformat_minor": 0,
13 "worksheets": [
14 {
15 "cells": [
16 {
17 "cell_type": "code",
18 "collapsed": false,
19 "input": [
20 "from IPython.html import widgets # Widget definitions\n",
21 "from IPython.display import display # Used to display widgets in the notebook\n",
22 "\n",
23 "# Enable widgets in this notebook\n",
24 "widgets.init_widget_js()"
25 ],
26 "language": "python",
27 "metadata": {},
28 "outputs": [
29 {
30 "javascript": [
31 "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/button.js\");"
32 ],
33 "metadata": {},
34 "output_type": "display_data"
35 },
36 {
37 "javascript": [
38 "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/int_range.js\");"
39 ],
40 "metadata": {},
41 "output_type": "display_data"
42 },
43 {
44 "javascript": [
45 "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/string.js\");"
46 ],
47 "metadata": {},
48 "output_type": "display_data"
49 },
50 {
51 "javascript": [
52 "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/multicontainer.js\");"
53 ],
54 "metadata": {},
55 "output_type": "display_data"
56 },
57 {
58 "javascript": [
59 "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/bool.js\");"
60 ],
61 "metadata": {},
62 "output_type": "display_data"
63 },
64 {
65 "javascript": [
66 "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/int.js\");"
67 ],
68 "metadata": {},
69 "output_type": "display_data"
70 },
71 {
72 "javascript": [
73 "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/selection.js\");"
74 ],
75 "metadata": {},
76 "output_type": "display_data"
77 },
78 {
79 "javascript": [
80 "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/float.js\");"
81 ],
82 "metadata": {},
83 "output_type": "display_data"
84 },
85 {
86 "javascript": [
87 "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/float_range.js\");"
88 ],
89 "metadata": {},
90 "output_type": "display_data"
91 },
92 {
93 "javascript": [
94 "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/container.js\");"
95 ],
96 "metadata": {},
97 "output_type": "display_data"
98 }
99 ],
100 "prompt_number": 22
101 },
102 {
103 "cell_type": "code",
104 "collapsed": false,
105 "input": [
106 "# Import the base Widget class and the traitlets Unicode class.\n",
107 "from IPython.html.widgets import Widget\n",
108 "from IPython.utils.traitlets import Unicode, Int\n",
109 "\n",
110 "# Define our FileWidget and its target model and default view.\n",
111 "class FileWidget(Widget):\n",
112 " target_name = Unicode('FileWidgetModel')\n",
113 " default_view_name = Unicode('FilePickerView')\n",
114 " \n",
115 " # Define the custom state properties to sync with the front-end\n",
116 " _keys = ['value', 'filename']\n",
117 " value = Unicode('')\n",
118 " filename = Unicode('')\n",
119 " on_failed = Int(0)"
120 ],
121 "language": "python",
122 "metadata": {},
123 "outputs": [],
124 "prompt_number": 23
125 },
126 {
127 "cell_type": "code",
128 "collapsed": false,
129 "input": [
130 "%%javascript\n",
131 "\n",
132 "require([\"notebook/js/widget\"], function(){\n",
133 " \n",
134 " // Define the DateModel and register it with the widget manager.\n",
135 " var FileModel = IPython.WidgetModel.extend({});\n",
136 " IPython.notebook.widget_manager.register_widget_model('FileWidgetModel', FileModel);\n",
137 " \n",
138 " // Define the DatePickerView\n",
139 " var FilePickerView = IPython.WidgetView.extend({\n",
140 " \n",
141 " render: function(){\n",
142 " var that = this;\n",
143 " this.$el = $('<input />')\n",
144 " .attr('type', 'file')\n",
145 " .change(function(evt){ that.handleFileChange(evt) });\n",
146 " },\n",
147 " \n",
148 " // Handles: User input\n",
149 " events: { \"change\" : \"handleFileChange\" }, \n",
150 " handleFileChange: function(evt) { \n",
151 " \n",
152 " //Retrieve the first (and only!) File from the FileList object\n",
153 " var that = this;\n",
154 " var f = evt.target.files[0];\n",
155 " if (f) {\n",
156 " var r = new FileReader();\n",
157 " r.onload = function(e) {\n",
158 " that.model.set('value', e.target.result);\n",
159 " that.model.update_other_views(that);\n",
160 " }\n",
161 " r.readAsText(f);\n",
162 " }\n",
163 " else\n",
164 " {\n",
165 " this.model.set('on_failed', this.model.get('on_failed') + 1);\n",
166 " this.model.update_other_views(this);\n",
167 " }\n",
168 " this.model.set('filename', f.name);\n",
169 " this.model.update_other_views(this);\n",
170 " },\n",
171 " });\n",
172 " \n",
173 " // Register the DatePickerView with the widget manager.\n",
174 " IPython.notebook.widget_manager.register_widget_view('FilePickerView', FilePickerView);\n",
175 "});"
176 ],
177 "language": "python",
178 "metadata": {},
179 "outputs": [
180 {
181 "javascript": [
182 "\n",
183 "require([\"notebook/js/widget\"], function(){\n",
184 " \n",
185 " // Define the DateModel and register it with the widget manager.\n",
186 " var FileModel = IPython.WidgetModel.extend({});\n",
187 " IPython.notebook.widget_manager.register_widget_model('FileWidgetModel', FileModel);\n",
188 " \n",
189 " // Define the DatePickerView\n",
190 " var FilePickerView = IPython.WidgetView.extend({\n",
191 " \n",
192 " render: function(){\n",
193 " var that = this;\n",
194 " this.$el = $('<input />')\n",
195 " .attr('type', 'file')\n",
196 " .change(function(evt){ that.handleFileChange(evt) });\n",
197 " },\n",
198 " \n",
199 " // Handles: User input\n",
200 " events: { \"change\" : \"handleFileChange\" }, \n",
201 " handleFileChange: function(evt) { \n",
202 " \n",
203 " //Retrieve the first (and only!) File from the FileList object\n",
204 " var that = this;\n",
205 " var f = evt.target.files[0];\n",
206 " if (f) {\n",
207 " var r = new FileReader();\n",
208 " r.onload = function(e) {\n",
209 " that.model.set('value', e.target.result);\n",
210 " that.model.update_other_views(that);\n",
211 " }\n",
212 " r.readAsText(f);\n",
213 " }\n",
214 " else\n",
215 " {\n",
216 " this.model.set('on_failed', this.model.get('on_failed') + 1);\n",
217 " this.model.update_other_views(this);\n",
218 " }\n",
219 " this.model.set('filename', f.name);\n",
220 " this.model.update_other_views(this);\n",
221 " },\n",
222 " });\n",
223 " \n",
224 " // Register the DatePickerView with the widget manager.\n",
225 " IPython.notebook.widget_manager.register_widget_view('FilePickerView', FilePickerView);\n",
226 "});"
227 ],
228 "metadata": {},
229 "output_type": "display_data",
230 "text": [
231 "<IPython.core.display.Javascript at 0x21d8cd0>"
232 ]
233 }
234 ],
235 "prompt_number": 24
236 },
237 {
238 "cell_type": "code",
239 "collapsed": false,
240 "input": [
241 "file_widget = FileWidget()\n",
242 "display(file_widget)\n",
243 "\n",
244 "def file_loading():\n",
245 " print \"Loading %s\" % file_widget.filename\n",
246 "\n",
247 "def file_loaded():\n",
248 " print \"Loaded, file contents: %s\" % file_widget.value\n",
249 "\n",
250 "def file_failed(name, old_value, new_value):\n",
251 " if new_value > old_value:\n",
252 " print \"Could not load file contents of %s\" % file_widget.filename\n",
253 "\n",
254 "\n",
255 "file_widget.on_trait_change(file_loading, 'filename')\n",
256 "file_widget.on_trait_change(file_loaded, 'value')\n",
257 "file_widget.on_trait_change(file_failed, 'on_failed')"
258 ],
259 "language": "python",
260 "metadata": {},
261 "outputs": [
262 {
263 "output_type": "stream",
264 "stream": "stdout",
265 "text": [
266 "Loading test.txt\n"
267 ]
268 },
269 {
270 "output_type": "stream",
271 "stream": "stdout",
272 "text": [
273 "Loaded, file contents: \n",
274 "hello world!\n"
275 ]
276 }
277 ],
278 "prompt_number": 25
279 },
280 {
281 "cell_type": "code",
282 "collapsed": false,
283 "input": [],
284 "language": "python",
285 "metadata": {},
286 "outputs": []
287 }
288 ],
289 "metadata": {}
290 }
291 ]
292 } No newline at end of file
General Comments 0
You need to be logged in to leave comments. Login now