notebook/examples/widgets/File Upload Widget.ipynb

In [1]:

from IPython.html import widgets # Widget definitions
from IPython.display import display # Used to display widgets in the notebook

Custom Widget¶

In [2]:

# Import the base Widget class and the traitlets Unicode class.
from IPython.html.widgets import Widget
from IPython.utils.traitlets import Unicode, Int

# Define our FileWidget and its target model and default view.
class FileWidget(Widget):
    target_name = Unicode('FileWidgetModel')
    default_view_name = Unicode('FilePickerView')
    
    # Define the custom state properties to sync with the front-end
    _keys = ['value', 'filename']
    value = Unicode('')
    filename = Unicode('')
    on_failed = Int(0)

In [3]:

%%javascript

require(["notebook/js/widget"], function(){
    
    // Define the FileModel and register it with the widget manager.
    var FileModel = IPython.WidgetModel.extend({});
    IPython.widget_manager.register_widget_model('FileWidgetModel', FileModel);
    
    // Define the FilePickerView
    var FilePickerView = IPython.WidgetView.extend({
        
        render: function(){
            var that = this;
            this.$el = $('<input />')
                .attr('type', 'file')
                .change(function(evt){ that.handleFileChange(evt) });
        },
        
        // Handles: User input
        handleFileChange: function(evt) { 
            
            //Retrieve the first (and only!) File from the FileList object
            var that = this;
            var f = evt.target.files[0];
            if (f) {
                var r = new FileReader();
                r.onload = function(e) {
                    that.model.set('value', e.target.result);
                    that.model.update_other_views(that);
                }
                r.readAsText(f);
            } else {
                this.model.set('on_failed', this.model.get('on_failed') + 1);
                this.model.update_other_views(this);
            }
            this.model.set('filename', f.name);
            this.model.update_other_views(this);
        },
    });
        
    // Register the DatePickerView with the widget manager.
    IPython.widget_manager.register_widget_view('FilePickerView', FilePickerView);
});

Usage¶

In [4]:

file_widget = FileWidget()
display(file_widget)

def file_loading():
    print "Loading %s" % file_widget.filename

def file_loaded():
    print "Loaded, file contents: %s" % file_widget.value

def file_failed(name, old_value, new_value):
    if new_value > old_value:
        print "Could not load file contents of %s" % file_widget.filename


file_widget.on_trait_change(file_loading, 'filename')
file_widget.on_trait_change(file_loaded, 'value')
file_widget.on_trait_change(file_failed, 'on_failed')

Loading test.txt

Loaded, file contents:  
hello world!