Pass File Information From Html File Selector Input To Python And Bokeh

I'm trying to create a simple bokeh server application that allows a user to load a file from a file selection button. The app will then plot the data fro

Solution 1:

Maintainer note: CoffeeScript support is deprecated in Bokeh and will be removed entirely in Bokeh 2.0. This example would need to be re-written in JavaScript or TypeScript

As of Bokeh 0.12.4, there's no built-in file chooser input widget. But it is possible to create new extensions to Bokeh that work as seamlessly as the built-in widgets to connect JS events to Python.

The code below is a super-rough implementation of a model that wraps an <input type="file"> to hook it up to Python code. This code should work with Bokeh 0.12.4 and newer.

from bokeh.core.properties import String
from bokeh.io import curdoc
from bokeh.layouts import column
from bokeh.models import Button, LayoutDOM

IMPL = """
import * as p from "core/properties"
import {LayoutDOM, LayoutDOMView} from "models/layouts/layout_dom"

export class FileInputView extends LayoutDOMView
  initialize: (options) ->
    super(options)
    input = document.createElement("input")
    input.type = "file"
    input.onchange = () =>
      @model.value = input.value
    @el.appendChild(input)

export class FileInput extends LayoutDOM
  default_view: FileInputView
  type: "FileInput"
  @define {
    value: [ p.String ]
  }
"""classFileInput(LayoutDOM):
    __implementation__ = IMPL
    value = String()

input = FileInput()

defupload():
    print(input.value)
button = Button(label="Upload")
button.on_click(upload)

curdoc().add_root(column(input, button))

This results in the output below:

There are almost certainly improvements that could be made to this. SO is not really a good place for iterative and collaborative discussion, so if you have questions about improving this, I'd suggest the project Discourse list as the best place to continue.

Solution 2:

I faced the same task (pass files to Bokeh widget) but with some other restrictions (Tornado with embedded Bokeh server). So the code below is not the exact solution but it can help:

Tornado HTTP web page with embedded Bokeh widget which communicates with other page of the same applicationhttps://gist.github.com/Sklavit/c378a18661f0d91918931eba5a1d7553