how to use ui.upload component to upload files to server

[wasabismile]

First Check

• I added a very descriptive title here.
• I have checked the FAQs for a similar question and didn't find it.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the NiceGUI documentation, with the integrated search.
• I already searched online "How to X in NiceGUI" and didn't find any information.

Example Code

from fastapi import  UploadFile, File
from pathlib import Path
from nicegui import ui,app
UPLOAD_DIR = Path("uploads") 
UPLOAD_DIR.mkdir(exist_ok=True)  
from typing import List
@app.post("/upload")
async def upload_files(files: List[UploadFile] = File(...)):
    saved = []
    for file in files:
        file_path = UPLOAD_DIR / file.filename
        with open(file_path, "wb") as f:
            f.write(await file.read())
        saved.append(file.filename)
    return {"uploaded": saved}
ui.upload().props('url="http://127.0.0.1:8080/upload"')
ui.run()

Description

I want to implement a feature that allows users to upload files to the server, but I don't know how to do it.

NiceGUI Version

1.4.47

Python Version

3.11

Browser

Chrome

Operating System

Windows

Additional Context

No response

[evnchn]

Hello @wasabismile, thanks for giving NiceGUI a try!

Consider https://nicegui.io/documentation/upload

Note:

@app.post: That's part of FastAPI

@ui.page: That's part of NiceGUI

You can use NiceGUI stuff inside the latter only, and ui.upload should get you most of the way there in terms of achieving what you want to do.

[falkoschindler]

Hi @wasabismile,

Like @evnchn mentioned, the documentation should give an idea how to handle uploads, especially https://nicegui.io/documentation/upload#show_file_content. You probably don't have to define your own @app.post endpoint.

By the way: Your NiceGUI version 1.4.47 is pretty old (actually 1.4.47 doesn't exist, maybe you mean 1.4.37?). I strongly recommend upgrading to get new features and improved performance.

[wasabismile]

@falkoschindler @evnchn my NiceGUI version is 1.4.37 . I made a writing mistake and realized that I can't revise the version after submitting. I checked the code of the ui.upload class and found the correct type for the POST request. Thank you both for your suggestions.

from fastapi import  UploadFile, File
from pathlib import Path
from nicegui import ui,app,events
from fastapi import Request
from typing import cast
UPLOAD_DIR = Path("uploads") 
UPLOAD_DIR.mkdir(exist_ok=True)  
from typing import List

@app.post("/upload")
async def upload_files(request: Request):
    #print(request.headers)
    form = await request.form()
    uploads = [cast(UploadFile, data) for data in form.values()]
    for file in uploads:
        file_path = UPLOAD_DIR / file.filename
        print(file_path)
        with open(file_path, "wb") as f:
            f.write(await file.read())
    return {"uploaded": 'ok'}
async def handle_upload(e: events.UploadEventArguments):
    filename = e.name
    file_path = UPLOAD_DIR / filename
    print(file_path)
    with open(file_path, "wb") as f:
        f.write(e.content.read())
@ui.page("/")
def upload_page():
    ui.upload().props('url="/upload"')
    ui.upload(on_upload=handle_upload)
ui.run()

[ustas4]

from nicegui import ui, events
import os

# Create a directory to store uploaded files if it doesn't exist
UPLOAD_DIR = "uploaded_files"
os.makedirs(UPLOAD_DIR, exist_ok=True)

def handle_upload(e: events.UploadEventArguments):
    """
    Handles the uploaded file.
    """
    file_path = os.path.join(UPLOAD_DIR, e.name)
    with open(file_path, "wb") as f:
        f.write(e.content.read())
    ui.notify(f"Uploaded '{e.name}' successfully to {UPLOAD_DIR}!")

def handle_rejected():
    """
    Handles file rejection (e.g., due to size limit).
    """
    ui.notify("File upload rejected. Max file size is 1MB.", color="negative")

@ui.page('/')
def main_page():
    ui.label("Upload a file:")
    ui.upload(
        on_upload=handle_upload,
        on_rejected=handle_rejected,
        max_file_size=1_000_000,  # 1 MB limit
        multiple=True,  # Allow multiple file uploads
        auto_upload=True # Automatically upload when selected
    ).classes('max-w-full') # Style the upload component

ui.run()

UploadEventArguments(sender=<nicegui.elements.upload.Upload object at 0x00000218AEF62B90>, client=<nicegui.client.Client object at 0x00000218AC12A9D0>, file=SmallFileUpload(name='New Text Document.txt', content_type='text/plain', _data=b'example of text'))
'UploadEventArguments' object has no attribute 'name'
Traceback (most recent call last):
  File "D:\Projects\SparkProject\nicegui_dragdrop\.venv\Lib\site-packages\nicegui\events.py", line 435, in handle_event
    result = cast(Callable[[EventT], Any], handler)(arguments)
             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "D:\Projects\SparkProject\nicegui_dragdrop\tester.py", line 13, in handle_upload
    file_path = os.path.join(UPLOAD_DIR, e.name)
                                         ^^^^^^
**AttributeError: 'UploadEventArguments' object has no attribute 'name'**

nicegui 3.2.0
python 3.11
OS windows 11

nicegui 3.0.3
python 3.11
linux

[wasabismile]

my NiceGUI version is too old, please refer to the documentation for examples of ui.upload
https://nicegui.io/documentation/upload#file_upload

here file_path = os.path.join(UPLOAD_DIR, e.name), the latest usage is file_path = os.path.join(UPLOAD_DIR, e.file.name)