Image loading from local drive for Bokeh server

Community Support
1

Hello Everyone,
I want to load image from local drive for bokeh server. I am facing difficulty in this. Please help me out by giving the proper step like where(path) to store the image and the command needed to import the image.

Thanks and regards

SAI JENA

2

Hi Sai Jena,

I could not find the thread that helped me to solve similar problem, so I will share the code.
The code below defines function that creates upload button, that you can add to your layout. When you click the button custom js open file selection dialog. Selected file uploaded to save_path under give name. After upload callback() is called.

from os.path import join, basename
import logging
import base64
from bokeh.models import ColumnDataSource, CustomJS
from bokeh.models.widgets import Button

def new_upload_button(save_path,
callback,
name=“tmp.las”,
label=“Upload file.”):
def file_callback(attr, old, new):
raw_contents = source.data[‘contents’][0]
# remove the prefix that JS adds
prefix, b64_contents = raw_contents.split(“,”, 1)
file_contents = base64.b64decode(b64_contents)
fname = join(save_path, name)
with open(fname, “wb”) as f:
f.write(file_contents)
logging.info("Success: file uploaded " + fname)
callback(fname)

source = ColumnDataSource({'contents': [], 'name': []})
source.on_change('data', file_callback)

button = Button(label=label, button_type="success")
button.callback = CustomJS(args=dict(source=source), code=_upload_js)
return button, source

_upload_js = “”"
function read_file(filename) {
var reader = new FileReader();
reader.onload = load_handler;
reader.onerror = error_handler;
// readAsDataURL represents the file’s data as a base64 encoded string
reader.readAsDataURL(filename);
}

function load_handler(event) {
var b64string = event.target.result;
source.data = {‘contents’ : [b64string], ‘name’:[input.files[0].name]};
source.change.emit()
}

function error_handler(evt) {
if(evt.target.error.name == “NotReadableError”) {
alert(“Can’t read file!”);
}
}

var input = document.createElement(‘input’);
input.setAttribute(‘type’, ‘file’);
input.onchange = function(){
if (window.FileReader) {
read_file(input.files[0]);
} else {
alert(‘FileReader is not supported in this browser’);
}
}
input.click();
“”"

``

With regards,
Timur.

···

On Thursday, 23 November 2017 09:49:14 UTC+3, sai jena wrote:

Hello Everyone,
I want to load image from local drive for bokeh server. I am facing difficulty in this. Please help me out by giving the proper step like where(path) to store the image and the command needed to import the image.

Thanks and regards

SAI JENA

3

Hi Timur,

I just want to say thank you! I had the same problem for quite a while and your solution works!

The only thing I could now hope for is a file dialog with editible file extensions filters, but that is no priority.

Regards

···

Am Donnerstag, 23. November 2017 07:59:09 UTC+1 schrieb Timur Zaripov:

Hi Sai Jena,

I could not find the thread that helped me to solve similar problem, so I will share the code.
The code below defines function that creates upload button, that you can add to your layout. When you click the button custom js open file selection dialog. Selected file uploaded to save_path under give name. After upload callback() is called.

from os.path import join, basename
import logging
import base64
from bokeh.models import ColumnDataSource, CustomJS
from bokeh.models.widgets import Button

def new_upload_button(save_path,
callback,
name=“tmp.las”,
label=“Upload file.”):
def file_callback(attr, old, new):
raw_contents = source.data[‘contents’][0]
# remove the prefix that JS adds
prefix, b64_contents = raw_contents.split(“,”, 1)
file_contents = base64.b64decode(b64_contents)
fname = join(save_path, name)
with open(fname, “wb”) as f:
f.write(file_contents)
logging.info("Success: file uploaded " + fname)
callback(fname)

source = ColumnDataSource({'contents': [], 'name': []})
source.on_change('data', file_callback)

button = Button(label=label, button_type="success")
button.callback = CustomJS(args=dict(source=source), code=_upload_js)
return button, source

_upload_js = “”"
function read_file(filename) {
var reader = new FileReader();
reader.onload = load_handler;
reader.onerror = error_handler;
// readAsDataURL represents the file’s data as a base64 encoded string
reader.readAsDataURL(filename);
}

function load_handler(event) {
var b64string = event.target.result;
source.data = {‘contents’ : [b64string], ‘name’:[input.files[0].name]};
source.change.emit()
}

function error_handler(evt) {
if(evt.target.error.name == “NotReadableError”) {
alert(“Can’t read file!”);
}
}

var input = document.createElement(‘input’);
input.setAttribute(‘type’, ‘file’);
input.onchange = function(){
if (window.FileReader) {
read_file(input.files[0]);
} else {
alert(‘FileReader is not supported in this browser’);
}
}
input.click();
“”"

``

With regards,
Timur.

On Thursday, 23 November 2017 09:49:14 UTC+3, sai jena wrote:

Hello Everyone,
I want to load image from local drive for bokeh server. I am facing difficulty in this. Please help me out by giving the proper step like where(path) to store the image and the command needed to import the image.

Thanks and regards

SAI JENA

4

Hi Joris,

I am no js programmer, so no solution from the head. I suggest that you look towards “accept” attribute of input field: it filters files in file selector by given mask.

With regards, Timur.

···

On Friday, 24 November 2017 14:38:02 UTC+3, Joris Nettelstroth wrote:

Hi Timur,

I just want to say thank you! I had the same problem for quite a while and your solution works!

The only thing I could now hope for is a file dialog with editible file extensions filters, but that is no priority.

Regards

Am Donnerstag, 23. November 2017 07:59:09 UTC+1 schrieb Timur Zaripov:

Hi Sai Jena,

I could not find the thread that helped me to solve similar problem, so I will share the code.
The code below defines function that creates upload button, that you can add to your layout. When you click the button custom js open file selection dialog. Selected file uploaded to save_path under give name. After upload callback() is called.

from os.path import join, basename
import logging
import base64
from bokeh.models import ColumnDataSource, CustomJS
from bokeh.models.widgets import Button

def new_upload_button(save_path,
callback,
name=“tmp.las”,
label=“Upload file.”):
def file_callback(attr, old, new):
raw_contents = source.data[‘contents’][0]
# remove the prefix that JS adds
prefix, b64_contents = raw_contents.split(“,”, 1)
file_contents = base64.b64decode(b64_contents)
fname = join(save_path, name)
with open(fname, “wb”) as f:
f.write(file_contents)
logging.info("Success: file uploaded " + fname)
callback(fname)

source = ColumnDataSource({'contents': [], 'name': []})
source.on_change('data', file_callback)

button = Button(label=label, button_type="success")
button.callback = CustomJS(args=dict(source=source), code=_upload_js)
return button, source

_upload_js = “”"
function read_file(filename) {
var reader = new FileReader();
reader.onload = load_handler;
reader.onerror = error_handler;
// readAsDataURL represents the file’s data as a base64 encoded string
reader.readAsDataURL(filename);
}

function load_handler(event) {
var b64string = event.target.result;
source.data = {‘contents’ : [b64string], ‘name’:[input.files[0].name]};
source.change.emit()
}

function error_handler(evt) {
if(evt.target.error.name == “NotReadableError”) {
alert(“Can’t read file!”);
}
}

var input = document.createElement(‘input’);
input.setAttribute(‘type’, ‘file’);
input.onchange = function(){
if (window.FileReader) {
read_file(input.files[0]);
} else {
alert(‘FileReader is not supported in this browser’);
}
}
input.click();
“”"

``

With regards,
Timur.

On Thursday, 23 November 2017 09:49:14 UTC+3, sai jena wrote:

Hello Everyone,
I want to load image from local drive for bokeh server. I am facing difficulty in this. Please help me out by giving the proper step like where(path) to store the image and the command needed to import the image.

Thanks and regards

SAI JENA

5

Hi there, to those still listening:

Did you ever have problems uploading larger files?

I have two similar Excel files, one is working and one is not. I could pin the problem down to writing into

source.data[‘contents’][0]

``

(the ‘upload’ process).

Consider the snippet below for my testing:

function load_handler(event) {
var b64string = event.target.result;
alert(input.files[0].name);
alert(b64string.length); // ← Here I can measure the length of the string
source.data = {‘contents’ : [b64string], ‘name’:[input.files[0].name]};
source.change.emit()
}

``

File 1: 7262 KB; b64string.length = 9913894 - works fine

File 2: 8013 KB; b64string.length= 10940146 - Bokeh WebSocket connection is closed the moment that the content of source.data is written by the JS code - on source.change.emit() the python code should pick up again, but instead the client just dies.

I can make File 2 work by removing data from the Excel sheets

Is 10.940.146 characters too large for the Bokeh source object and/or JS to handle? Or is this just a coincidence and the problem is elsewhere?

The following test within Python works just fine, so guess the problem is indeed elsewhere…

test = ‘A’*10940146
source = ColumnDataSource({‘contents’: [test], ‘name’: [‘Test’]})
print(len(source.data[‘contents’][0]))

``

Regards

···

Am Freitag, 24. November 2017 13:20:03 UTC+1 schrieb Timur Zaripov:

Hi Joris,

I am no js programmer, so no solution from the head. I suggest that you look towards “accept” attribute of input field: it filters files in file selector by given mask.

With regards, Timur.
On Friday, 24 November 2017 14:38:02 UTC+3, Joris Nettelstroth wrote:

Hi Timur,

I just want to say thank you! I had the same problem for quite a while and your solution works!

The only thing I could now hope for is a file dialog with editible file extensions filters, but that is no priority.

Regards

Am Donnerstag, 23. November 2017 07:59:09 UTC+1 schrieb Timur Zaripov:

Hi Sai Jena,

I could not find the thread that helped me to solve similar problem, so I will share the code.
The code below defines function that creates upload button, that you can add to your layout. When you click the button custom js open file selection dialog. Selected file uploaded to save_path under give name. After upload callback() is called.

from os.path import join, basename
import logging
import base64
from bokeh.models import ColumnDataSource, CustomJS
from bokeh.models.widgets import Button

def new_upload_button(save_path,
callback,
name=“tmp.las”,
label=“Upload file.”):
def file_callback(attr, old, new):
raw_contents = source.data[‘contents’][0]
# remove the prefix that JS adds
prefix, b64_contents = raw_contents.split(“,”, 1)
file_contents = base64.b64decode(b64_contents)
fname = join(save_path, name)
with open(fname, “wb”) as f:
f.write(file_contents)
logging.info("Success: file uploaded " + fname)
callback(fname)

source = ColumnDataSource({'contents': [], 'name': []})
source.on_change('data', file_callback)

button = Button(label=label, button_type="success")
button.callback = CustomJS(args=dict(source=source), code=_upload_js)
return button, source

_upload_js = “”"
function read_file(filename) {
var reader = new FileReader();
reader.onload = load_handler;
reader.onerror = error_handler;
// readAsDataURL represents the file’s data as a base64 encoded string
reader.readAsDataURL(filename);
}

function load_handler(event) {
var b64string = event.target.result;
source.data = {‘contents’ : [b64string], ‘name’:[input.files[0].name]};
source.change.emit()
}

function error_handler(evt) {
if(evt.target.error.name == “NotReadableError”) {
alert(“Can’t read file!”);
}
}

var input = document.createElement(‘input’);
input.setAttribute(‘type’, ‘file’);
input.onchange = function(){
if (window.FileReader) {
read_file(input.files[0]);
} else {
alert(‘FileReader is not supported in this browser’);
}
}
input.click();
“”"

``

With regards,
Timur.

On Thursday, 23 November 2017 09:49:14 UTC+3, sai jena wrote:

Hello Everyone,
I want to load image from local drive for bokeh server. I am facing difficulty in this. Please help me out by giving the proper step like where(path) to store the image and the command needed to import the image.

Thanks and regards

SAI JENA

6

Hi Joris,

You’re likely hitting WebSocket connection closed on long messages · Issue #608 · tornadoweb/tornado · GitHub

This also might be relevant: RFC 6455 - The WebSocket Protocol

While you can probably encounter this issue in some other situations (trying to plot a huge image - but I have not tested it), I would recommend against using Bokeh WS or WS in general for uploading files. Instead, you could use a POST request with some handler on the server side.

If you still want to do this via Bokeh WS, you can try using streaming while splitting the data into smaller chunks. But you’ll have to somehow notify the server when the data ends.

Regards,

Eugene

···

On Wednesday, November 29, 2017 at 10:04:09 PM UTC+7, Joris Nettelstroth wrote:

Hi there, to those still listening:

Did you ever have problems uploading larger files?

I have two similar Excel files, one is working and one is not. I could pin the problem down to writing into

source.data[‘contents’][0]

``

(the ‘upload’ process).

Consider the snippet below for my testing:

function load_handler(event) {
var b64string = event.target.result;
alert(input.files[0].name);
alert(b64string.length); // ← Here I can measure the length of the string
source.data = {‘contents’ : [b64string], ‘name’:[input.files[0].name]};
source.change.emit()
}

``

File 1: 7262 KB; b64string.length = 9913894 - works fine

File 2: 8013 KB; b64string.length= 10940146 - Bokeh WebSocket connection is closed the moment that the content of source.data is written by the JS code - on source.change.emit() the python code should pick up again, but instead the client just dies.

I can make File 2 work by removing data from the Excel sheets

Is 10.940.146 characters too large for the Bokeh source object and/or JS to handle? Or is this just a coincidence and the problem is elsewhere?

The following test within Python works just fine, so guess the problem is indeed elsewhere…

test = ‘A’*10940146
source = ColumnDataSource({‘contents’: [test], ‘name’: [‘Test’]})
print(len(source.data[‘contents’][0]))

``

Regards

Am Freitag, 24. November 2017 13:20:03 UTC+1 schrieb Timur Zaripov:

Hi Joris,

I am no js programmer, so no solution from the head. I suggest that you look towards “accept” attribute of input field: it filters files in file selector by given mask.

With regards, Timur.
On Friday, 24 November 2017 14:38:02 UTC+3, Joris Nettelstroth wrote:

Hi Timur,

I just want to say thank you! I had the same problem for quite a while and your solution works!

The only thing I could now hope for is a file dialog with editible file extensions filters, but that is no priority.

Regards

Am Donnerstag, 23. November 2017 07:59:09 UTC+1 schrieb Timur Zaripov:

Hi Sai Jena,

I could not find the thread that helped me to solve similar problem, so I will share the code.
The code below defines function that creates upload button, that you can add to your layout. When you click the button custom js open file selection dialog. Selected file uploaded to save_path under give name. After upload callback() is called.

from os.path import join, basename
import logging
import base64
from bokeh.models import ColumnDataSource, CustomJS
from bokeh.models.widgets import Button

def new_upload_button(save_path,
callback,
name=“tmp.las”,
label=“Upload file.”):
def file_callback(attr, old, new):
raw_contents = source.data[‘contents’][0]
# remove the prefix that JS adds
prefix, b64_contents = raw_contents.split(“,”, 1)
file_contents = base64.b64decode(b64_contents)
fname = join(save_path, name)
with open(fname, “wb”) as f:
f.write(file_contents)
logging.info("Success: file uploaded " + fname)
callback(fname)

source = ColumnDataSource({'contents': [], 'name': []})
source.on_change('data', file_callback)

button = Button(label=label, button_type="success")
button.callback = CustomJS(args=dict(source=source), code=_upload_js)
return button, source

_upload_js = “”"
function read_file(filename) {
var reader = new FileReader();
reader.onload = load_handler;
reader.onerror = error_handler;
// readAsDataURL represents the file’s data as a base64 encoded string
reader.readAsDataURL(filename);
}

function load_handler(event) {
var b64string = event.target.result;
source.data = {‘contents’ : [b64string], ‘name’:[input.files[0].name]};
source.change.emit()
}

function error_handler(evt) {
if(evt.target.error.name == “NotReadableError”) {
alert(“Can’t read file!”);
}
}

var input = document.createElement(‘input’);
input.setAttribute(‘type’, ‘file’);
input.onchange = function(){
if (window.FileReader) {
read_file(input.files[0]);
} else {
alert(‘FileReader is not supported in this browser’);
}
}
input.click();
“”"

``

With regards,
Timur.

On Thursday, 23 November 2017 09:49:14 UTC+3, sai jena wrote:

Hello Everyone,
I want to load image from local drive for bokeh server. I am facing difficulty in this. Please help me out by giving the proper step like where(path) to store the image and the command needed to import the image.

Thanks and regards

SAI JENA

7

Thanks for the information. Time will tell if I actually need to allow such large uploads. For now I’m happy to have identified the cause of the issue correctly (and to be able to just abort the upload before it kills the session).

···

Am Mittwoch, 29. November 2017 16:42:28 UTC+1 schrieb Eugene Pakhomov:

Hi Joris,

You’re likely hitting https://github.com/tornadoweb/tornado/issues/608

This also might be relevant: https://tools.ietf.org/html/rfc6455#section-10.4

While you can probably encounter this issue in some other situations (trying to plot a huge image - but I have not tested it), I would recommend against using Bokeh WS or WS in general for uploading files. Instead, you could use a POST request with some handler on the server side.

If you still want to do this via Bokeh WS, you can try using streaming while splitting the data into smaller chunks. But you’ll have to somehow notify the server when the data ends.

Regards,

Eugene

On Wednesday, November 29, 2017 at 10:04:09 PM UTC+7, Joris Nettelstroth wrote:

Hi there, to those still listening:

Did you ever have problems uploading larger files?

I have two similar Excel files, one is working and one is not. I could pin the problem down to writing into

source.data[‘contents’][0]

``

(the ‘upload’ process).

Consider the snippet below for my testing:

function load_handler(event) {
var b64string = event.target.result;
alert(input.files[0].name);
alert(b64string.length); // ← Here I can measure the length of the string
source.data = {‘contents’ : [b64string], ‘name’:[input.files[0].name]};
source.change.emit()
}

``

File 1: 7262 KB; b64string.length = 9913894 - works fine

File 2: 8013 KB; b64string.length= 10940146 - Bokeh WebSocket connection is closed the moment that the content of source.data is written by the JS code - on source.change.emit() the python code should pick up again, but instead the client just dies.

I can make File 2 work by removing data from the Excel sheets

Is 10.940.146 characters too large for the Bokeh source object and/or JS to handle? Or is this just a coincidence and the problem is elsewhere?

The following test within Python works just fine, so guess the problem is indeed elsewhere…

test = ‘A’*10940146
source = ColumnDataSource({‘contents’: [test], ‘name’: [‘Test’]})
print(len(source.data[‘contents’][0]))

``

Regards

Am Freitag, 24. November 2017 13:20:03 UTC+1 schrieb Timur Zaripov:

Hi Joris,

I am no js programmer, so no solution from the head. I suggest that you look towards “accept” attribute of input field: it filters files in file selector by given mask.

With regards, Timur.
On Friday, 24 November 2017 14:38:02 UTC+3, Joris Nettelstroth wrote:

Hi Timur,

I just want to say thank you! I had the same problem for quite a while and your solution works!

The only thing I could now hope for is a file dialog with editible file extensions filters, but that is no priority.

Regards

Am Donnerstag, 23. November 2017 07:59:09 UTC+1 schrieb Timur Zaripov:

Hi Sai Jena,

I could not find the thread that helped me to solve similar problem, so I will share the code.
The code below defines function that creates upload button, that you can add to your layout. When you click the button custom js open file selection dialog. Selected file uploaded to save_path under give name. After upload callback() is called.

from os.path import join, basename
import logging
import base64
from bokeh.models import ColumnDataSource, CustomJS
from bokeh.models.widgets import Button

def new_upload_button(save_path,
callback,
name=“tmp.las”,
label=“Upload file.”):
def file_callback(attr, old, new):
raw_contents = source.data[‘contents’][0]
# remove the prefix that JS adds
prefix, b64_contents = raw_contents.split(“,”, 1)
file_contents = base64.b64decode(b64_contents)
fname = join(save_path, name)
with open(fname, “wb”) as f:
f.write(file_contents)
logging.info("Success: file uploaded " + fname)
callback(fname)

source = ColumnDataSource({'contents': [], 'name': []})
source.on_change('data', file_callback)

button = Button(label=label, button_type="success")
button.callback = CustomJS(args=dict(source=source), code=_upload_js)
return button, source

_upload_js = “”"
function read_file(filename) {
var reader = new FileReader();
reader.onload = load_handler;
reader.onerror = error_handler;
// readAsDataURL represents the file’s data as a base64 encoded string
reader.readAsDataURL(filename);
}

function load_handler(event) {
var b64string = event.target.result;
source.data = {‘contents’ : [b64string], ‘name’:[input.files[0].name]};
source.change.emit()
}

function error_handler(evt) {
if(evt.target.error.name == “NotReadableError”) {
alert(“Can’t read file!”);
}
}

var input = document.createElement(‘input’);
input.setAttribute(‘type’, ‘file’);
input.onchange = function(){
if (window.FileReader) {
read_file(input.files[0]);
} else {
alert(‘FileReader is not supported in this browser’);
}
}
input.click();
“”"

``

With regards,
Timur.

On Thursday, 23 November 2017 09:49:14 UTC+3, sai jena wrote:

Hello Everyone,
I want to load image from local drive for bokeh server. I am facing difficulty in this. Please help me out by giving the proper step like where(path) to store the image and the command needed to import the image.

Thanks and regards

SAI JENA

8

Hello Timur,

I’m quite new to these stuff and my question may seem trivial. I used this piece of code which gives me a button to load file, but I would like to know once the file content is loaded in source, how can I use it to plot the image?

Thanks

···

On Thursday, November 23, 2017 at 1:59:09 AM UTC-5, Timur Zaripov wrote:

Hi Sai Jena,

I could not find the thread that helped me to solve similar problem, so I will share the code.
The code below defines function that creates upload button, that you can add to your layout. When you click the button custom js open file selection dialog. Selected file uploaded to save_path under give name. After upload callback() is called.

from os.path import join, basename
import logging
import base64
from bokeh.models import ColumnDataSource, CustomJS
from bokeh.models.widgets import Button

def new_upload_button(save_path,
callback,
name=“tmp.las”,
label=“Upload file.”):
def file_callback(attr, old, new):
raw_contents = source.data[‘contents’][0]
# remove the prefix that JS adds
prefix, b64_contents = raw_contents.split(“,”, 1)
file_contents = base64.b64decode(b64_contents)
fname = join(save_path, name)
with open(fname, “wb”) as f:
f.write(file_contents)
logging.info("Success: file uploaded " + fname)
callback(fname)

source = ColumnDataSource({'contents': [], 'name': []})
source.on_change('data', file_callback)

button = Button(label=label, button_type="success")
button.callback = CustomJS(args=dict(source=source), code=_upload_js)
return button, source

_upload_js = “”"
function read_file(filename) {
var reader = new FileReader();
reader.onload = load_handler;
reader.onerror = error_handler;
// readAsDataURL represents the file’s data as a base64 encoded string
reader.readAsDataURL(filename);
}

function load_handler(event) {
var b64string = event.target.result;
source.data = {‘contents’ : [b64string], ‘name’:[input.files[0].name]};
source.change.emit()
}

function error_handler(evt) {
if(evt.target.error.name == “NotReadableError”) {
alert(“Can’t read file!”);
}
}

var input = document.createElement(‘input’);
input.setAttribute(‘type’, ‘file’);
input.onchange = function(){
if (window.FileReader) {
read_file(input.files[0]);
} else {
alert(‘FileReader is not supported in this browser’);
}
}
input.click();
“”"

``

With regards,
Timur.

On Thursday, 23 November 2017 09:49:14 UTC+3, sai jena wrote:

Hello Everyone,
I want to load image from local drive for bokeh server. I am facing difficulty in this. Please help me out by giving the proper step like where(path) to store the image and the command needed to import the image.

Thanks and regards

SAI JENA

9

To be more precise, why this code is not working? I mean why it doesn’t show the image?

import os

from bokeh.io import curdoc

from bokeh.layouts import row, widgetbox

from bokeh.plotting import figure

from os.path import join, basename

import logging

import base64

from bokeh.models import ColumnDataSource, CustomJS

from bokeh.models.widgets import Button

_upload_js = “”"

function read_file(filename) {

var reader = new FileReader();

reader.onload = load_handler;

reader.onerror = error_handler;

// readAsDataURL represents the file’s data as a base64 encoded string

reader.readAsDataURL(filename);

}

function load_handler(event) {

var b64string = event.target.result;

source.data = {‘contents’ : [b64string], ‘name’:[input.files[0].name]};

source.change.emit()

}

function error_handler(evt) {

if(evt.target.error.name == “NotReadableError”) {

alert(“Can’t read file!”);

}

}

var input = document.createElement(‘input’);

input.setAttribute(‘type’, ‘file’);

input.onchange = function(){

if (window.FileReader) {

read_file(input.files[0]);

} else {

alert(‘FileReader is not supported in this browser’);

}

}

input.click();

“”"

save_path = os.getcwd()

name = ‘temp.esi’

def file_callback(attr, old, new):

raw_contents = source.data[‘contents’][0]

remove the prefix that JS adds

prefix, b64_contents = raw_contents.split(“,”, 1)

file_contents = base64.b64decode(b64_contents)

fname = join(save_path, name)

with open(fname, “wb”) as f:

f.write(file_contents)

logging.info("Success: file uploaded " + fname)

update(fname)

source = ColumnDataSource({‘contents’: , ‘name’: })

source.on_change(‘data’, file_callback)

button = Button(label=“Upload File”, button_type=“success”)

button.callback = CustomJS(args=dict(source=source), code=_upload_js)

Set up plot

p = figure(x_range=(0,1), y_range=(0,1))

def update(fname):

p.image_url(url=[fname], x=0, y=1, w=1, h=1)

update(“temp.esi”)

curdoc().add_root(row(button, p))

curdoc().title = “Image Loader”

``

Thanks

···

On Sunday, April 15, 2018 at 6:40:11 PM UTC-4, Esmaeil Naderi wrote:

Hello Timur,

I’m quite new to these stuff and my question may seem trivial. I used this piece of code which gives me a button to load file, but I would like to know once the file content is loaded in source, how can I use it to plot the image?

Thanks

On Thursday, November 23, 2017 at 1:59:09 AM UTC-5, Timur Zaripov wrote:

Hi Sai Jena,

I could not find the thread that helped me to solve similar problem, so I will share the code.
The code below defines function that creates upload button, that you can add to your layout. When you click the button custom js open file selection dialog. Selected file uploaded to save_path under give name. After upload callback() is called.

from os.path import join, basename
import logging
import base64
from bokeh.models import ColumnDataSource, CustomJS
from bokeh.models.widgets import Button

def new_upload_button(save_path,
callback,
name=“tmp.las”,
label=“Upload file.”):
def file_callback(attr, old, new):
raw_contents = source.data[‘contents’][0]
# remove the prefix that JS adds
prefix, b64_contents = raw_contents.split(“,”, 1)
file_contents = base64.b64decode(b64_contents)
fname = join(save_path, name)
with open(fname, “wb”) as f:
f.write(file_contents)
logging.info("Success: file uploaded " + fname)
callback(fname)

source = ColumnDataSource({'contents': [], 'name': []})
source.on_change('data', file_callback)

button = Button(label=label, button_type="success")
button.callback = CustomJS(args=dict(source=source), code=_upload_js)
return button, source

_upload_js = “”"
function read_file(filename) {
var reader = new FileReader();
reader.onload = load_handler;
reader.onerror = error_handler;
// readAsDataURL represents the file’s data as a base64 encoded string
reader.readAsDataURL(filename);
}

function load_handler(event) {
var b64string = event.target.result;
source.data = {‘contents’ : [b64string], ‘name’:[input.files[0].name]};
source.change.emit()
}

function error_handler(evt) {
if(evt.target.error.name == “NotReadableError”) {
alert(“Can’t read file!”);
}
}

var input = document.createElement(‘input’);
input.setAttribute(‘type’, ‘file’);
input.onchange = function(){
if (window.FileReader) {
read_file(input.files[0]);
} else {
alert(‘FileReader is not supported in this browser’);
}
}
input.click();
“”"

``

With regards,
Timur.

On Thursday, 23 November 2017 09:49:14 UTC+3, sai jena wrote:

Hello Everyone,
I want to load image from local drive for bokeh server. I am facing difficulty in this. Please help me out by giving the proper step like where(path) to store the image and the command needed to import the image.

Thanks and regards

SAI JENA

10

I think it does save the file but doesn’t show the image on the figure. Any ideas?

···

On Sunday, April 15, 2018 at 9:44:34 PM UTC-5, Esmaeil Naderi wrote:

To be more precise, why this code is not working? I mean why it doesn’t show the image?

import os

from bokeh.io import curdoc

from bokeh.layouts import row, widgetbox

from bokeh.plotting import figure

from os.path import join, basename

import logging

import base64

from bokeh.models import ColumnDataSource, CustomJS

from bokeh.models.widgets import Button

_upload_js = “”"

function read_file(filename) {

var reader = new FileReader();

reader.onload = load_handler;

reader.onerror = error_handler;

// readAsDataURL represents the file’s data as a base64 encoded string

reader.readAsDataURL(filename);

}

function load_handler(event) {

var b64string = event.target.result;

source.data = {‘contents’ : [b64string], ‘name’:[input.files[0].name]};

source.change.emit()

}

function error_handler(evt) {

if(evt.target.error.name == “NotReadableError”) {

alert(“Can’t read file!”);

}

}

var input = document.createElement(‘input’);

input.setAttribute(‘type’, ‘file’);

input.onchange = function(){

if (window.FileReader) {

read_file(input.files[0]);

} else {

alert(‘FileReader is not supported in this browser’);

}

}

input.click();

“”"

save_path = os.getcwd()

name = ‘temp.esi’

def file_callback(attr, old, new):

raw_contents = source.data[‘contents’][0]

remove the prefix that JS adds

prefix, b64_contents = raw_contents.split(“,”, 1)

file_contents = base64.b64decode(b64_contents)

fname = join(save_path, name)

with open(fname, “wb”) as f:

f.write(file_contents)

logging.info("Success: file uploaded " + fname)

update(fname)

source = ColumnDataSource({‘contents’: , ‘name’: })

source.on_change(‘data’, file_callback)

button = Button(label=“Upload File”, button_type=“success”)

button.callback = CustomJS(args=dict(source=source), code=_upload_js)

Set up plot

p = figure(x_range=(0,1), y_range=(0,1))

def update(fname):

p.image_url(url=[fname], x=0, y=1, w=1, h=1)

update(“temp.esi”)

curdoc().add_root(row(button, p))

curdoc().title = “Image Loader”

``

Thanks

On Sunday, April 15, 2018 at 6:40:11 PM UTC-4, Esmaeil Naderi wrote:

Hello Timur,

I’m quite new to these stuff and my question may seem trivial. I used this piece of code which gives me a button to load file, but I would like to know once the file content is loaded in source, how can I use it to plot the image?

Thanks

On Thursday, November 23, 2017 at 1:59:09 AM UTC-5, Timur Zaripov wrote:

Hi Sai Jena,

I could not find the thread that helped me to solve similar problem, so I will share the code.
The code below defines function that creates upload button, that you can add to your layout. When you click the button custom js open file selection dialog. Selected file uploaded to save_path under give name. After upload callback() is called.

from os.path import join, basename
import logging
import base64
from bokeh.models import ColumnDataSource, CustomJS
from bokeh.models.widgets import Button

def new_upload_button(save_path,
callback,
name=“tmp.las”,
label=“Upload file.”):
def file_callback(attr, old, new):
raw_contents = source.data[‘contents’][0]
# remove the prefix that JS adds
prefix, b64_contents = raw_contents.split(“,”, 1)
file_contents = base64.b64decode(b64_contents)
fname = join(save_path, name)
with open(fname, “wb”) as f:
f.write(file_contents)
logging.info("Success: file uploaded " + fname)
callback(fname)

source = ColumnDataSource({'contents': [], 'name': []})
source.on_change('data', file_callback)

button = Button(label=label, button_type="success")
button.callback = CustomJS(args=dict(source=source), code=_upload_js)
return button, source

_upload_js = “”"
function read_file(filename) {
var reader = new FileReader();
reader.onload = load_handler;
reader.onerror = error_handler;
// readAsDataURL represents the file’s data as a base64 encoded string
reader.readAsDataURL(filename);
}

function load_handler(event) {
var b64string = event.target.result;
source.data = {‘contents’ : [b64string], ‘name’:[input.files[0].name]};
source.change.emit()
}

function error_handler(evt) {
if(evt.target.error.name == “NotReadableError”) {
alert(“Can’t read file!”);
}
}

var input = document.createElement(‘input’);
input.setAttribute(‘type’, ‘file’);
input.onchange = function(){
if (window.FileReader) {
read_file(input.files[0]);
} else {
alert(‘FileReader is not supported in this browser’);
}
}
input.click();
“”"

``

With regards,
Timur.

On Thursday, 23 November 2017 09:49:14 UTC+3, sai jena wrote:

Hello Everyone,
I want to load image from local drive for bokeh server. I am facing difficulty in this. Please help me out by giving the proper step like where(path) to store the image and the command needed to import the image.

Thanks and regards

SAI JENA