Using Mithril 1.0 and the HTML5 FileReader API

FileReader.js

const chosenTab = stream(tabs[0])
const rawData = stream();

const load = cb => f => {
  const r = new FileReader()
  r.readAsText(f)
  r.onloadend = data => cb({ success: true, data } )
  r.onerror = data => cb({ success: false, data })
}


const view = rawData
  .map( ({ data , success}) =>  
        success
        ? m('', [
                m('input[type=file][multiple]', {
                    onchange: m.withAttr(
                        'files'
                        , files => upload(
                            Array.from(files) 
                              .map(load(rawData))
                        )
                    )
                })
                ,m('pre', {
                    display: 'block',
                    'background-color': '#f5f5f5',
                    border: '1px solid #ccc',
                    padding: '9.5px',
                    color: '#333',
                    style: {
                        width: '100%',
                        'word-break': 'break-all',
                        'word-wrap': 'break-word',
                        height: '200px'
                    }
                }, data )
        ])
        : m('pre', { style: { color: 'red' }}, 'Something went wrong: ' + data)
    )


// Initialize the view stream
view({ success:true, data: ''})
// redraw whenever a file loads
rawData
  .map(m.redraw)


module.exports = {
    chosenTab
    ,view
}

In ES5:

'use strict';

var chosenTab = stream(tabs[0]);
var rawData = stream();

var load = function load(cb) {
    return function (f) {
        var r = new FileReader();
        r.readAsText(f);
        r.onloadend = function (data) {
            return cb({ success: true, data: data });
        };
        r.onerror = function (data) {
            return cb({ success: false, data: data });
        };
    };
};

var view = rawData.map(function (_ref) {
    var data = _ref.data,
        success = _ref.success;
    return success ? m('', [m('input[type=file][multiple]', {
        onchange: m.withAttr('files', function (files) {
            return upload(Array.from(files).map(load(rawData)));
        })
    }), m('pre', {
        display: 'block',
        'background-color': '#f5f5f5',
        border: '1px solid #ccc',
        padding: '9.5px',
        color: '#333',
        style: {
            width: '100%',
            'word-break': 'break-all',
            'word-wrap': 'break-word',
            height: '200px'
        }
    }, data)]) : m('pre', { style: { color: 'red' } }, 'Something went wrong: ' + data);
});

// Initialize the view stream
view({ success: true, data: '' });
// redraw whenever a file loads
rawData.map(m.redraw);

module.exports = {
    chosenTab: chosenTab,
    view: view
};