Upload CSV to read as Pandas df in Flet

[basatsu]

I'd like to know about how to upload csv and read it with pandas, then display each count of Rows and Columns.
In this flet example , I changed "upload_files" method to the below.
https://github.com/flet-dev/examples/blob/main/python/controls/file-picker/file-picker-upload-progress.py

def main(page: Page):
　・・・
   def upload_files(e):
        **global rowcount**
        **global colcount**
        if file_picker.result is not None and file_picker.result.files is not None:
            for f in file_picker.result.files:
                **df=pd.read_csv(f.name)**
                **rowcount=len(df)**
                **colcount=len(df.columns)**

    # hide dialog in a overlay
    page.overlay.append(file_picker)

    page.add(
        ElevatedButton(
            "Select files...",
            icon=icons.FOLDER_OPEN,
            on_click=lambda _: file_picker.pick_files(allow_multiple=True),
        ),
        Column(ref=files),
        ElevatedButton(
            "Upload",
            ref=upload_button,
            icon=icons.UPLOAD,
            on_click=upload_files,
            disabled=True,
        ),
        **Text(rowcount),**
        Divider(height=9, thickness=3),
        **Text(colcount)****
    )
flet.app(target=main)

But I got this Name error.

File "C:\Users\○○\Documents\Python\py310\flet\upload\upprogress.py", line 72, in main
    Text(rowcount),
NameError: name 'rowcount' is not defined

I couldn't figure it out. How do you solve it?

Does this look familiar to you?

[ndonkoHenri]

You can try using this package: https://github.com/StanMathers/simple-datatable
It will help you do all that automatically.

For your error, can you tell me where you defined the rowcount variable? I can see the global, but can't see the where it is defined exactly..

[ndonkoHenri]

Ah. You only want to display the count of rows and columns? I thought you wanted to build up a data table from a csv file.
Below is my try. I added comments to help you understand..

from typing import Dict
import flet
from flet import (
    Column,
    ElevatedButton,
    FilePicker,
    FilePickerResultEvent,
    FilePickerUploadEvent,
    FilePickerUploadFile,
    FilePickerFileType,
    Page,
    ProgressRing,
    Ref,
    Row,
    Text,
    icons,
    Divider
)
import pandas as pd


def main(page: Page):
    prog_bars: Dict[str, ProgressRing] = {}
    files = Ref[Column]()
    upload_button = Ref[ElevatedButton]()
    rowcount = Text()
    colcount = Text()

    def file_picker_result(e: FilePickerResultEvent):
        upload_button.current.disabled = True if e.files is None else False
        prog_bars.clear()
        files.current.controls.clear()
        if e.files is not None:
            for f in e.files:
                prog = ProgressRing(value=0, bgcolor="#eeeeee", width=20, height=20)
                prog_bars[f.name] = prog
                files.current.controls.append(Row([prog, Text(f.path)]))
        page.update()

    def on_upload_progress(e: FilePickerUploadEvent):
        prog_bars[e.file_name].value = e.progress
        prog_bars[e.file_name].update()

    file_picker = FilePicker(on_result=file_picker_result, on_upload=on_upload_progress)

    def upload_files(e):
        if file_picker.result is not None and file_picker.result.files is not None:
            for f in file_picker.result.files:
                df = pd.read_csv(f.path)        # read f.path instead of f.name !
                rowcount.value = str(len(df))   # updates the value of the rowcount Text control
                colcount.value = str(len(df.columns))    # updates the value of the rowcount colcount control
                page.update()

    page.overlay.append(file_picker)

    page.add(
        ElevatedButton(
            "Select files...",
            icon=icons.FOLDER_OPEN,
            on_click=lambda _: file_picker.pick_files(
                allow_multiple=False,
                file_type=FilePickerFileType.CUSTOM,        # this option is needed for the 'allowed_extensions' to work !
                allowed_extensions=["csv"]              # the file picker mainly show csv files and not all files which is the default
            )
        ),
        Column(ref=files),
        ElevatedButton(
            "Upload",
            ref=upload_button,
            icon=icons.UPLOAD,
            on_click=upload_files,
            disabled=True,
        ),
        rowcount,
        Divider(height=9, thickness=3),
        colcount
    )


flet.app(target=main)

Let me please know if there's any part you don't understand.

[basatsu]

Thank you. I got it.
If you don't mind, one more thing,
I'd be happy to be able to display the dataframe you import to DataTable on screen by using simple-datatale package.
https://github.com/StanMathers/simple-datatable
I also added Excel export function method " def export_results".

I added several rows with my comments to the code you told me.

But I did some trial and error but I'm stuck on this error.
AttributeError: type object 'DataFrame' has no attribute '_build_add_commands'
I'm not sure where I'm missing.
I'd appreciate it if you could give me any good advice on this?
I wonder if I am mistaking the place to define simpledt_dt variable....

Here is my updated code.

from typing import Dict
import flet
from flet import (
    Column,
    ElevatedButton,
    FilePicker,
    FilePickerResultEvent,
    FilePickerUploadEvent,
    FilePickerUploadFile,
    FilePickerFileType,
    Page,
    ProgressRing,
    Ref,
    Row,
    Text,
    icons,
    Divider
)
import pandas as pd
from simpledatatable import DataFrame

simpledt_dt:pd.DataFrame # define dataframe

def main(page: Page):
    prog_bars: Dict[str, ProgressRing] = {}
    files = Ref[Column]()
    upload_button = Ref[ElevatedButton]()
    rowcount = Text()
    colcount = Text()

    def file_picker_result(e: FilePickerResultEvent):
        upload_button.current.disabled = True if e.files is None else False
        prog_bars.clear()
        files.current.controls.clear()
        if e.files is not None:
            for f in e.files:
                prog = ProgressRing(value=0, bgcolor="#eeeeee", width=20, height=20)
                prog_bars[f.name] = prog
                files.current.controls.append(Row([prog, Text(f.path)]))
        page.update()

    def on_upload_progress(e: FilePickerUploadEvent):
        prog_bars[e.file_name].value = e.progress
        prog_bars[e.file_name].update()

    file_picker = FilePicker(on_result=file_picker_result, on_upload=on_upload_progress)

    def upload_files(e):

        global simpledt_dt # add global variable
      
        if file_picker.result is not None and file_picker.result.files is not None:
            for f in file_picker.result.files:
                df = pd.read_csv(f.path) 

                simpledt_df = DataFrame(df)  # Initialize simpledt DataFrame object
                simpledt_dt = simpledt_df.datatable  # Extract DataTable instance from simpledt  

                rowcount.value = str(len(df))   
                colcount.value = str(len(df.columns))   
                page.update()
    
    # add export function
    def export_results(_):
        simpledt_dt.to_excel("export.xlsx", index=False)

    page.overlay.append(file_picker)

    page.add(
        ElevatedButton(
            "Select files...",
            icon=icons.FOLDER_OPEN,
            on_click=lambda _: file_picker.pick_files(
                allow_multiple=False,
                file_type=FilePickerFileType.CUSTOM,       
                allowed_extensions=["csv"] 
            )
        ),
        Column(ref=files),
        ElevatedButton(
            "Upload",
            ref=upload_button,
            icon=icons.UPLOAD,
            on_click=upload_files,
            disabled=True,
        ),
        rowcount,
        Divider(height=9, thickness=3),
        colcount,
        
        # add UI
        ElevatedButton(text="Export", on_click=export_results),
        simpledt_dt   
    )

flet.app(target=main)

This screen is what I had in mind when you upload CSV file. Like this.

[basatsu]

I'm still stuck on this matter...
What I want is the attached image as above.
How do I upload CSV and display that CSV data to DataTable here?

[ndonkoHenri]

Alright. Let me give your program a try.

[ndonkoHenri]

Try this:

from typing import Dict
import flet
from flet import (
    Column,
    ElevatedButton,
    FilePicker,
    FilePickerResultEvent,
    FilePickerUploadEvent,
    FilePickerUploadFile,
    FilePickerFileType,
    Page,
    ProgressRing,
    Ref,
    Row,
    Text,
    icons,
    Divider,
)
import pandas as pd
import simpledt  # simpledt and not simpledatatable


def main(page: Page):
    page.scroll = "hidden"

    prog_bars: Dict[str, ProgressRing] = {}
    files = Ref[Column]()
    upload_button = Ref[ElevatedButton]()
    rowcount = Text()
    colcount = Text()

    my_simpledt_table: simpledt.CSVDataTable

    def file_picker_result(e: FilePickerResultEvent):
        upload_button.current.disabled = True if e.files is None else False
        prog_bars.clear()
        files.current.controls.clear()
        if e.files is not None:
            for f in e.files:
                prog = ProgressRing(value=0, bgcolor="#eeeeee", width=20, height=20)
                prog_bars[f.name] = prog
                files.current.controls.append(Row([prog, Text(f.path)]))
        page.update()

    def on_upload_progress(e: FilePickerUploadEvent):
        prog_bars[e.file_name].value = e.progress
        prog_bars[e.file_name].update()

    def upload_files(e):

        nonlocal my_simpledt_table

        if file_picker.result is not None and file_picker.result.files is not None:
            for f in file_picker.result.files:
                df = pd.read_csv(f.path)

                my_simpledt_table = simpledt.CSVDataTable(f.path)
                page.add(my_simpledt_table.datatable)

                rowcount.value = str(len(df))
                colcount.value = str(len(df.columns))
                page.update()

    # add export function
    def export_results(_):
        """
        Exports the table contents into an excel file.
        """
        # _df here gives you access to a pandas dataframe containing the contents of your table. If you need better explanations let me know.
        my_simpledt_table._df.to_excel("export.xlsx")

    file_picker = FilePicker(on_result=file_picker_result, on_upload=on_upload_progress)
    page.overlay.append(file_picker)

    page.add(
        ElevatedButton(
            "Select files...",
            icon=icons.FOLDER_OPEN,
            on_click=lambda _: file_picker.pick_files(
                allow_multiple=False,
                file_type=FilePickerFileType.CUSTOM,
                allowed_extensions=["csv"]
            )
        ),
        Column(ref=files),
        ElevatedButton(
            "Upload",
            ref=upload_button,
            icon=icons.UPLOAD,
            on_click=upload_files,
            disabled=True,
        ),
        rowcount,
        Divider(height=9, thickness=3),
        colcount,
        ElevatedButton(text="Export", on_click=export_results),
    )


flet.app(target=main)