How to upload file manually

[Mte90]

Question

On https://nicegui.io/documentation/upload we have the upload but works only on auto-upload with the event on_upload.
If I want to get the data in the file upload in ia different event? Like in my case I have that in a modal so before I need to create the data and after save also the image.

In this way I can do it only on edit action.
Also on the example it is not clear how to get that data outside the event.

[Mte90]

any help for this?

[falkoschindler]

Sorry, I don't understand your question. What exactly does not work? Can you share a minimum reproducible code example?
And what do you mean with "get that data outside the event"?

[Mte90]

self.element["customer_avatar"] = (
    ui.upload(
        on_upload=lambda event: self.uploaded_avatar(event, customer),
        on_rejected=lambda: ui.notify(
            "Impossibile caricare. Controlla la dimensione e il formato dell'immagine!"
        ),
        max_file_size=1_000_000,
    )
    .classes("w-full shadow-none drop-shadow-none border")
    .props('auto-upload hide-upload-btn max-files="1" accept=".jpg, image/*" no-thumbnails')
)

As you can see we have upload when the upload event finished.
If I have that file upload in a form and I want to save it manually how I can get the data? because self.element["customer_avatar"] doesn't have that event data, I don't see any methods.

PS: yes I will disable the auto-upload

[falkoschindler]

Ah, I understand: If you're collecting information in some kind of form (e.g. name, age, birth certificate) you want the user to submit all information with the click of a button. Any files "staged" for upload should be submitted as well.

To be honest, I don't know how to do that. I guess you might need to wrap it in a Form, maybe use a File Picker instead of an Uploader, and receive all form data in a FastAPI POST endpoint.