I’ve created a bokeh div with text of an html fileinput instead of the bokeh fileinput widget because I need custom css styling. How can I access the file that is input using the html method? (Using bokeh serve to launch app)
A bit similar to the question and discussion here:
You’ll have to add a pure java script event handler to the non-Bokeh widget, then set some property on a Bokeh model in order to pass the file data back in to Bokeh.
I understand the javascript event handler, but I’m a bit lost on how to pass the file data back to Bokeh. What property should I set on a Bokeh model for example?
Bokeh models have a tags property, which is an empty list by default. Depending on your software organization, flow, and what you need to do, it might suffice to insert the data in that list.
tags is a reasonable option, you could also potentially stuff the contents in a ColumnDataSource (e.g. if the file is a CSV you could even parse out individual columns). A specific recommendation really depends on what the file is and what you want to do with it.
Thanks all these are good tips. How would I reference this model/property within the javascript code to pass the data back to bokeh?
Edit: After thinking about it, I should reference the bokeh model in the javascript code by searching for it perhaps getelementbyid and using javascript i can save data to a columndatasource for example which could then be used in bokeh. Correct?
Hi all,
I’ve created a bokeh div and added an HTML fileinput widget, a custom label, and some javascript code as a test. I do not believe the js script is being executed or at least I do not see any console output in chrome.
Anyone know why I’m having this issue?
I’ve now tried to read in the fileinput using jquery. However, the code still is not being executed on the launch of the bokeh app. If I write in the function after launch into the chrome console, it works correctly.
Scripts inserted in the DOM this way will not be executed by the browser. This is not quite the same situations, but still relevant:
