How to Handle File Uploads in NiceGUI Python

NiceGUI, similar to Streamlit has a feature to work with file uploads. In this post, we will explore how to work with file uploads and how to handle the contents of the uploaded file.

Let start with how to use the file upload widget in NiceGUI

Basic File Uploads

The ui.uploads is used to work with file uploads, it takes in a callback function or lambda function for the on_uploads which determines what should be done when a file is uploaded

The function usually takes in an UploadEventArguments from nicegui events in order to handle the uploaded file and then from there you can process it respectively.

from nicegui import ui ,events 

def handle_uploads(e: events.UploadEventArguments ):
     text = e.content.read().decode("utf-8")
     markdown_data.set_content(text)

ui.upload(on_upload=handle_uploads).props("accept=.md").classes("max-w-full")

## show the content
markdown_data = ui.markdown()


ui.run(port=8002)

FileType Restriction

You can use the `.props(“accept=”)` to restrict the file type your want to accept and automatically allow for selection for uploads.

#all files
ui.upload(on_upload=handle_uploads)
# for markdown
ui.upload(on_upload=handle_uploads).props("accept=.md").classes("max-w-full")
# for csv
ui.upload(on_upload=handle_uploads).props("accept=.csv").classes("max-w-full")

Showing Uploaded File Content

The events.UploadEventArguments offers the option of being able to read the file content. With this you can use any file processing library or function to display the uploaded content by connecting it to a ui element.

def handle_uploads(e: events.UploadEventArguments ):
     text = e.content.read().decode("utf-8")
     markdown_data.set_content(text)

Working with CSV File Uploads

The easiest way to read csv files is via pandas, however Pandas.read_csv() takes in a file IO hence we will need to convert the content read into an IO format using StringIO .Below is a function to handle csv file upload.

from nicegui import ui ,events 
import pandas as pd 
from io import StringIO

def csv_file_handler(e: events.UploadEventArguments):
    with StringIO(e.content.read().decode("utf-8")) as f:
        df = pd.read_csv(f)

Now let us combine all to both read csv file and display it inside a table

from nicegui import ui ,events 
import pandas as pd 
from io import StringIO

def csv_file_handler(e: events.UploadEventArguments):
    with StringIO(e.content.read().decode("utf-8")) as f:
        df = pd.read_csv(f)

    # show the content
    ui.table(columns=[{"name":col, "label":col, "field":col } for col in df.columns],
             rows=df.to_dict(orient="records"), pagination={"rowsPerPage": 10})
    
    

ui.upload(on_upload=csv_file_handler).props("accept=.csv").classes("max-w-full")




ui.run(port=8002)

We have seen how to handle file uploads using NiceGUI. You can also check out the video tutorial below

Thank You For Your Attention

Jesus Saves

By Jesse E.Agbe(JCharis)