How to process a task before FileSelector actually load the data

Panel
,
1

When I tried to update the progress bar based on FileSelector’s change, the file transfer starts earlier than activate_upload_status in an example below. Is there any way to first get the status change of FileSelecter and do some tasks i.e. change progress bar status, then trigger the file transfer?

If I have a bit bigger file like 80MB, it takes more than 1min to transfer depending on the upload speed. I would like to notify what is happening while a file is transferred. Right now, it seems just being stalled.

Class Dashboard(param.Parameterized):
    file_selector = param.FileSelector()
    progress = pn.widgets.Progress(active=False)

    @param.depends('file_selector', watch=True)
        def activate_upload_status(self):
            self.progress.active = True

[Context]
I am trying to create a very simple panel dashboard deployed on a remote server where a user can select a file (csv) and show the value as dataframe.

It would be appreciated if you have any advice.

2

Hi @h1ros

Welcome to the community. I tried to take a look at your question. But I was not able to run your example and start finding a solution.

Could you provide a Minimum reproducible example that could actually run and also include a screenshot? That would help a lot. Thanks.

3

@Marc Thank you so much for your quick response and kind guidance.
Here would be a minimal example of what I want to achieve.

When a user uploads a CSV via file selecter, I want the dashboard to indicate it is in progress by making the state of progress bar active (or ideally how many fractions of the file is being transferred, which would probably be another step.)

But, in the following example, the @param.depends('file_selector', watch=True) capture the change after the file was transferred. If the file size is bigger, it seems to just hang up.

Let me know if this example does not still work for you and the problem is clear enough or not.

import io
import param
import pandas as pd
import panel as pn


class Dashboard(param.Parameterized):

    df_input = pd.DataFrame()
    file_selector = param.FileSelector()
    progress = pn.widgets.Progress(value=0)

    # @param.depends('file_selector', watch=True)
    def read_input_table(self):
        try:
            bio = io.BytesIO()
            bio.write(self.file_selector)
            bio.seek(0)
            self.df_input = pd.read_csv(bio)
        except Exception as e:
            pass
        self.progress.value = 100

    @param.depends('file_selector', watch=True)
    def activate_upload_status(self):
        self.progress.value = 20
        self.read_input_table()

    @param.depends('df_input')
    def input_table(self):
        return pn.widgets.DataFrame(self.df_input.head())


dashboard = Dashboard()

# Input Table Overwrite the param to make it panel object
# See the detail:
# https://stackoverflow.com/questions/58400769/panel-param-fileinput-widget-and-param-depends-interaction
widget_input_file = pn.WidgetBox(
    pn.Param(
        dashboard.param['file_selector'],
        widgets={'file_selector': pn.widgets.FileInput}),
    dashboard.progress)


dashboard = pn.Column(
    widget_input_file,
    dashboard.input_table)

dashboard.servable()

The screen shot of the above example:

image
image1426×808 29 KB

4

Following up on this question. (cc @Marc)

Essentially, my question can be simplified: can we detect the event when a user press “ok” when selecting the file via file selector?

image
image1236×752 40.2 KB

Meanwhile, I was also looking at pn.state.param.busy but it only captures the processing in the code. The busy state was False when the file was transferred.