Implementing a upload button for a bokeh Web App

shoareau

Hello Dataikusers,

I am using a bokeh web application trough Dataiku and i am trying to implement a "upload button" or "Drag and drop" zone allowing met o upload a local file to the dataiku DSS.

have anyone already used/implemented such a feature?

I could create the upload button there is an issue to load it to the dataiku DSS.

Whenever i upload a file from any local path on my PC, at the DSS level , it is considered to be in a default path which does not exists .

IOError('File C:\\fakepath\\InputBuf.csv does not exist',)

Thank you

MarcH

Hello,

Could you please give some more information about the error, and if possible, a bit more info about what you are trying to do with the uploaded file? Does the error occur while searching for the file you want to upload after clicking the upload button? Or does it occur after the file has been uploaded?

shoareau

Well, what i am doing is adding a upload file button allowing to upload csv files. Those files are generated locally by another system. And i want my web app devlopped in bokeh/python through DATAIKU, to upload this file . Then i will process the data through my web application.

So i think there is 2 steps to work on:

1- Be able to retrieve a local file

2- Then being able to store it in DSS

So i can show you some extract of the code .Today i have the following code , to create the button.

I do use the function def upload to display the path of the file that was selected. For instance , if i select the file file.csv locally present on my path C:\Temp\file.csv, when using the FileInput class, when i display the path of the selected file , this one is forced to "C:\fakepath\file.csv"

import numpy as np
import pandas as pd
from bokeh.io import curdoc
from bokeh.layouts import row, widgetbox
from bokeh.models import ColumnDataSource
from bokeh.models.widgets import Slider, TextInput
from bokeh.plotting import figure
from bokeh.models import Select, PreText
from bokeh.events import ButtonClick
from bokeh.models import ColumnDataSource, Slider, TextInput,Button
from bokeh.layouts import row, column, gridplot

from bokeh.core.properties import List, String, Dict, Int, Complex, Float

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 ]
}
"""

class FileInput(LayoutDOM):
__implementation__ = IMPL
value = String()

.....

input = FileInput().

.....

def upload():
print(input.value)
df=pd.read_csv(input.value)

inputs = widgetbox(sensor_type,operation_type)
load_file=column([input,button])
curdoc().add_root(row(inputs,load_file, plot, width=800))

MarcH

I tried playing a bit with your code, but wasn't able to get an upload working.

However, I had more success with the official FileInput widget from Bokeh (https://docs.bokeh.org/en/latest/docs/reference/models/widgets.inputs.html#bokeh.models.widgets.inputs.FileInput), using this small example from Stack Overflow: https://stackoverflow.com/questions/57383505/python-bokeh-fileinput-widget

You may need to update Bokeh though (if you see an error like "cannot import name FileInput"). The easiest way would be to create/use a code environment in DSS, and install the Bokeh package in that code environment, as long as your DSS user has the permission to do that. Then select that code environment in your web app's Settings page.

shoareau

Thank you for the feedback.

The initial reason of my code was that the FileInput class is not found in the current bokeh version used by Dataiku.

How cani check the bokeh version that is used?

2021-01-05 22:56:22,167 ERROR Error running application handler <bokeh.application.handlers.directory.DirectoryHandler object at 0x7fc0d8a64510>: cannot import name FileInput
File "main.py", line 15, in <module>:
from bokeh.models.widgets import FileInput Traceback (most recent call last):
File "/export/home/applis/dataiku-dss-8.0.2/python.packages/bokeh/application/handlers/code_runner.py", line 163, in run
exec(self._code, module.__dict__)
File "/home/dss_data/tmp/DV_MANUFACTURING_PHM/web_apps/0q9oht6/backend/main.py", line 15, in <module>
from bokeh.models.widgets import FileInput
ImportError: cannot import name FileInput

MarcH

To check the version of all the packages (including Bokeh) in the built-in DSS Python environment, you can do so by opening a terminal and browsing to the DSS data directory and using the bin/pip command, like the following:

cd DATA_DIR
./bin/pip list

To install a newer version of bokeh, we recommend using a code environment, though it is possible to update the packages in the built-in environment, see here for more details: https://doc.dataiku.com/dss/latest/python/packages.html

It seems Bokeh's FileInput widget was added in Bokeh 1.3, so you would need to update to at least that version. Note that if you do update to the latest Bokeh version, or really any version newer than Bokeh 2, you will need to ensure that you are using DSS 8.0.3 as that is when support for Bokeh 2 was added in DSS (https://doc.dataiku.com/dss/latest/release_notes/8.0.html#version-8-0-3-november-4th-2020).