File upload and download items

[steweg]

Question

Hi all,

I am trying to find a correct solution for file upload and download at the same time. Is there some element that supports that? I was looking for quasar file picker, but that one seems not to be supported by nicegui. And even that one doesn't support downloading.

Background: I am having a need to store binary data block(s) within the form. Expectation is to support:

• upload one or more binary data blocks, this can be specified per instance, including min & max number of binary data blocks
• download already uploaded binary data blocks
• able to generate content for download from stored binary data from server (when user come back to edit form, he/she can download already uploaded data)

One of the idea was to combine table where one row will represent one uploaded element and will include download and delete buttons. And below it uploader. But it seems to be kind of strange that such thing is not supported directly as I believe I am not the only one who would need something like this.

Do you have any better idea how to do this? Thanks

[levywang]

I am also working on a similar project.

You can refer to the following example:
https://github.com/zauberzeug/nicegui/tree/main/examples/local_file_picker
https://github.com/zauberzeug/nicegui/blob/main/examples/download_text_as_file/main.py

For downloading, you may achieve your requirement using ui.download and add_static_files.

If data security is a concern, it's recommended to use FastAPI's temporary routes to provide file downloading functionality.

[falkoschindler]

Hi @steweg!

You can easily build an upload/download UI like this:

from nicegui import ui, events

def handle_upload(e: events.UploadEventArguments) -> None:
    ui.button(e.name, icon='file_download', on_click=lambda: ui.download(e.content.read(), e.name))

ui.upload(on_upload=handle_upload, multiple=True)

It simply creates a download button for every upload. Is this what you're looking for?

By the way, ui.download serves the file using a single-use route, which is automatically removed after downloading the file. I guess this is similar to FastAPI's temporary routes mentioned by @levywang.

[steweg]

Thanks for suggestions. If I get it right, there is no out-of-the box element to be used for this purpose and I need to create a proper combination by myself. I have already made progress on this topic using customized table with action buttons + uploader. It works nicely, but I wanted hide uploader and just use it's upload capability. But this doesn't work for some reason. Here is an bare minimum example:

from nicegui import ui

def _on_add(uploader):
    uploader.run_method('reset')
    uploader.set_visibility(not uploader.visible)
    ui.notify(f'Running with visibility set to {uploader.visible}')
    uploader.run_method('pickFiles')

uploader = ui.upload(auto_upload=True, on_upload=lambda e: ui.notify(f'Uploaded {e.name}'))
ui.button('Add file', on_click=lambda : _on_add(uploader))
ui.run()

My expectation was that using my own 'Add file' button, regardless of uploader visibility, the files will be uploaded and I will get notification about successful upload. Unfortunately when the uploader is not visible, that is not happening.

Any idea what I am doing wrong? Or is there some other component/element, which can simply force browser to pick a file and automatically upload to server without any UI visualization (just giving events like new upload started, upload finished and potential API to ask for current progress)?

[falkoschindler]

Hidden elements are not supposed to trigger events for security reasons. See #983, #1030 and #2875 for more information.

But you can set

uploader.ignores_events_when_hidden = False

[steweg]

Great, that explains it. Now I can finally put all things together. Thanks for help and examples.