Media Paths Saved as Static?

[PoshoDev]

Question

Hello there, 🙂

A site I'm working on started gaining some traction and I've been noticing some error logs quite frequently along the lines of:

/_nicegui/auto/static/916520f13ecca7dc5536915f2d263256/some_image.webp  404: Not Found

This is similar to another discussion (#3394), except I'm using Railway instead of fly.io, but they're fairly similar in the sense that they're both hosting services that allow for multiple instances.

Since I needed this to work as soon as possible, I just moved a bunch of files to my media/ path and I noticed that the same errors persisted, but for some reason the files that I had defined using app.add_media_files were being served as static.

For example:

root/
├── main.py
└── media/
    ├── chicken.jpg
    └── dog.webm

from nicegui import ui, app

app.add_media_files("media", "/media")

@ui.page("/")
def page_home():
    ui.image("media/chicken.jpg")
    ui.video("media/dog.webm")

ui.run()

When I open each respective element in a new tab to see the result URL this is what I found:

http://127.0.0.1:8080/_nicegui/auto/static/371e48856c573dabe891adee0afce452/chicken.jpg

http://127.0.0.1:8080/_nicegui/auto/media/307462da0644e0832bf9e14573f84d51/dog.webm

Despite only using ui.add_media_files and not ui.add_static_files, the chicken.jpg file is being served from /_nicegui/auto/static/ and the dog.webm file is being served from /_nicegui/auto/media/.

Alternatively, I tried to add each file individually like so, but the result is still the same:

from nicegui import ui, app

app.add_media_file(local_file="media/chicken.jpg", url_path="chicken.jpg")
app.add_media_file(local_file="media/dog.webm", url_path="dog.webm")

@ui.page("/")
def page_home():
    ui.image("media/chicken.jpg")
    ui.video("media/dog.webm")

ui.run(port=8001)

Is this intended? Such behavior is not mentioned in the docs. I am aware that this is not exactly the right approach to fix my real issue, since I should be serving small files as static, but I wanted to discuss what I noticed.

Thank you for reading. 😁

[rodja]

Files in /media can be loaded in chuncks which allows videos/audio to be seeked without needing to fetch the whole file (eg. streaming). Therefore the SourceElement implements the distinction:

https://github.com/zauberzeug/nicegui/blob/main/nicegui/elements/mixins/source_element.py#L93-L104

The distinction is not made by looking at the file path but rather how you call it (ui.media vs ui.video).

The real problem are your multiple instances. There is no way around using sticky sessions. And data uploaded to one instance must also be made available to the other (not only on file system level but also to NiceGUI so the routing is known to the instance).