How to access an uploaded image?

[BenjaminTrocme]

Question

Dear Niceguy developers / experts,

I discovered niceguy only 10 days ago and find it really awesome. I managed to design a webpage faster than I could ever imagine. And it is a lot of fun :-).

I am however facing an obstacle with the image upload. I followed the recipe https://nicegui.io/documentation/section_controls#file_upload
Everything seems to work fine but I do not understand where is stored the image (a right-click provides me the link but I would like to retrieve it in my script).

Many thanks for your help,

Benjamin, Paris

PS: I had the impression that #352 could provide me some hints but it did not work for me :-(.

[rodja]

In ui.upload you can register a function which is executed for every uploaded file with the on_upload parameter. For the called function a parameter of type nicegui.events.UploadEventArguments is provided. See https://nicegui.io/documentation/upload#show_file_content for a demo where the content of the uploaded file is shown in a dialog. You could also write this content to a file of your choice if you need to store the uploaded data.

[BenjaminTrocme]

Many thanks Rodja.

For the completness, I tested the following script

from nicegui import events, ui

def handle_upload(e: events.UploadEventArguments):
    with open(f"UploadedFiles/{e.name}", "wb") as f:
        f.write(e.content.read())

ui.upload(on_upload=handle_upload).props('accept=.png').classes('max-w-full')
ui.run(host="127.0.0.1", port=8082)

and it worked nicely :-).

[BenjaminTrocme]

Maybe one additional short question.
How can I retrieve the file name in the main script? Or pass an argument via handle_upload to retrieve it or choose the filename?

Many thanks again for the valuable and prompt support!

[BenjaminTrocme]

And one additional short one ;-).

How to specify the address of the image to be uploaded if we know it (typically an image that is updated regularly on the web at the same address and that we want to store on a single click)?

I checked the quasar page but did not find any relevant property.

Thanks

[rodja]

How can I retrieve the file name in the main script?

e.name should contain the filename.

How to specify the address of the image to be uploaded if we know it

I do not understand. What address? The upload does everything internal and provides the UploadEventArguments parameter.

[BenjaminTrocme]

Hello,

Apologizes for not being clear enough.

How can I retrieve the file name in the main script?

e.name should contain the filename.

Indeed, I was missing the e:lambda trick. As it may interest other persons, I am copying my working version:

from nicegui import events, ui

def handle_upload(e: events.UploadEventArguments, file):
    with open(f"UploadedFiles/{e.name}", "wb") as f:
        f.write(e.content.read())
        file["name"] = e.name

f = {"name": "Unknown"}
lab = ui.label()
lab.bind_text(f, "name")

ui.upload(on_upload=lambda e: handle_upload(e, f)).classes('max-w-full')
ui.run(host="127.0.0.1", port=8082)

How to specify the address of the image to be uploaded if we know it

I do not understand. What address? The upload does everything internal and provides the UploadEventArguments parameter.

This is quite an awkward question / idea. I found a way to do this in two steps that is much more natural to the user.

Thanks again for your prompt feedback. I am closing the discussion as everything is now clear.

Cheers