Implementing a upload button for a bokeh Web App

Options
shoareau
shoareau Partner, Dataiku DSS Core Designer, Registered Posts: 8 Partner

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

Answers

  • MarcH
    MarcH Dataiker Posts: 26 Dataiker
    Options

    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
    shoareau Partner, Dataiku DSS Core Designer, Registered Posts: 8 Partner
    Options

    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
    MarcH Dataiker Posts: 26 Dataiker
    Options

    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
    shoareau Partner, Dataiku DSS Core Designer, Registered Posts: 8 Partner
    Options

    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
    MarcH Dataiker Posts: 26 Dataiker
    Options

    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).

Setup Info
    Tags
      Help me…