Giter Club home page Giter Club logo

Comments (5)

falkoschindler avatar falkoschindler commented on May 13, 2024 1

To my understanding, in regular HTML this is handled by href attribute.

Yes, the href attribute points to the location where the resource can be accessed. The server, however, needs to provide the file at this location. Since NiceGUI implements frontend and backend, you need to take care of both.

Using ui.get is totally fine. You could even leave out the request argument. Since version 0.7.28 you can also use ui.add_static_files('/some/route', 'path/to/some/folder'). Then you can access every file in this folder via e.g. `/some/route/file.json'.

Wrapping a button inside a link seems a little weird. Combining a button with ui.open should work:

ui.button('Download', on_click=lambda e: ui.open('/some/route/file.json', e.socket))

Note that without providing the socket, every browser connected to the app would open the file, not only the one that triggered the click event.

from nicegui.

me21 avatar me21 commented on May 13, 2024

Solved it as:

@ui.get('/config.json')
def config_json_response(request: requests.Request):
    return responses.FileResponse(pathlib.Path.home().joinpath(DATA_MANAGER_DIRECTORY, CONFIG_FILENAME))

# somewhere later...

with ui.link(target='/config.json').classes(remove='underline').props('download=config.json'):
    ui.button('Download configuration file').classes('my-2 mx-4')

Is there any better way?

from nicegui.

me21 avatar me21 commented on May 13, 2024

Thanks! I'll update and try that. The line about socket should be probably added to the documentation. It was unclear to me what that argument is for.

UPD: your code opens the file contents in the browser instead of downloading it.

UPD: my bad, had to add non-empty filename argument to FileResponse.

PS: That's funny, Firefox just reloads the page when I click the button. What's more weird, even if I type another URL in the address field, it just reloads the page and doesn't go away from 192.168.7.2:8080. Probably a bug in Firefox 101. In Edge browser, it works as intended.

from nicegui.

falkoschindler avatar falkoschindler commented on May 13, 2024

Yeah, the documentation says "param socket: optional WebSocket defining the target client". That's maybe a little short. I'll add some clarification.

I think whether the file is displayed or downloaded depends on the browser and/or file extension. Good to hear that you found a way to enforce the download.

The Firefox behavior is weird. ui.open doesn't seem to be working at all. Nevertheless, I'll close this card and open a new issue: #42

from nicegui.

me21 avatar me21 commented on May 13, 2024

So it's not only me? I thought my Firefox extensions could play tricks on me. Oh well.

from nicegui.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.