Backend Development 6 min read

Building a Data Upload and Processing Web Page with PyWebIO Without Writing Front-End Code

This tutorial demonstrates how to use the Python PyWebIO library to create a web interface for uploading, cleaning, and querying pandas data—adding buttons, displaying tables, and handling continuous input—without writing any front-end HTML or JavaScript code.

Sohu Tech Products
Sohu Tech Products
Sohu Tech Products
Building a Data Upload and Processing Web Page with PyWebIO Without Writing Front-End Code

Many Python developers repeatedly write similar pandas data‑processing scripts and often resort to PyInstaller for packaging, which can be cumbersome; an alternative is to expose the functionality as a web page that can be accessed from any device with a public IP.

Using the PyWebIO library, you can build such a page with less than 100 lines of Python code and no front‑end markup. First, add a file upload widget with a single line of code:

file = file_upload('请选择需要加载的数据')

After uploading, read the file name and load the data with pandas:

df = read_file(file['filename'])

Next, create buttons that trigger data‑processing functions. PyWebIO’s put_buttons combined with the onclick callback lets you bind actions such as removing duplicate rows, checking missing values, or detecting outliers. Example:

put_buttons(['关闭'], onclick=lambda _: close_popup())

For multiple related actions, pass a list of button labels and a matching list of lambda functions:

put_buttons(['检查重复值','删除重复值','检查缺失值','删除缺失值','检查异常值','删除异常值'],
    onclick=[lambda: chongfu(df,res_table),
             lambda: chongfuchuli(df,res_table),
             lambda: other(),
             lambda: other(),
             lambda: other(),
             lambda: other()])

To display the processed results, convert a pandas DataFrame to HTML and embed it with put_scrollable and put_html :

put_scrollable(res_table, horizon_scroll=True, height=450)
res_table.reset(put_html(df1.to_html(border=0)))

Because PyWebIO runs synchronously, later UI elements are hidden until earlier inputs are provided. The pin API enables asynchronous‑like behavior: create an input box and a submit button, then bind the button to a function that queries the data based on the entered keyword.

put_markdown('## 数据查询')
pin.put_input('res', label='请在下方输入框要查询的关键字', type=TEXT)
put_buttons(['提交查询'], lambda _: chaxun(res_table, df, pin.pin['res']))

By following these steps, you can build a functional data‑analysis web page without touching HTML, CSS, or JavaScript, though the resulting UI is simple and may lack custom styling.

The tutorial concludes that PyWebIO’s strength lies in rapid prototyping of data‑driven interfaces, while its limitation is the inability to fine‑tune appearance without writing front‑end code.

PythonData Processingweb developmentpandaspywebio
Sohu Tech Products
Written by

Sohu Tech Products

A knowledge-sharing platform for Sohu's technology products. As a leading Chinese internet brand with media, video, search, and gaming services and over 700 million users, Sohu continuously drives tech innovation and practice. We’ll share practical insights and tech news here.

0 followers
Reader feedback

How this landed with the community

login Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.