diff --git a/assets/examples/sample-document.pdf b/assets/examples/sample-document.pdf new file mode 100644 index 0000000000..3d2d122dda Binary files /dev/null and b/assets/examples/sample-document.pdf differ diff --git a/website/docs/files.md b/website/docs/files.md index a3654f234f..c3be82d196 100644 --- a/website/docs/files.md +++ b/website/docs/files.md @@ -108,6 +108,17 @@ async def serve(q: Q): See `examples/file_stream.py` for a complete example. +## Rendering documents + +Use `q.site.upload()` to upload document from your app to the Wave server (or see the following section for other ways for serving files). Use the returned paths in `ui.frame()` component. + +```py +q.app.document_path, = await q.site.upload(['path/to/my/document.pdf']) +q.page['example'] = ui.form_card(box='1 1 7 7', items=[ + ui.frame(path=document_path) +]) +``` + ## Serving files directly from the Wave server As an alternative to using the above `upload()` or `download()` mechanisms, you can make the Wave server (`waved`) directly serve the contents of one or more existing directories. If the Wave server and your app both have access to the directories on the file system, your app can simply create or copy files to the directories to make them accessible from web browsers. diff --git a/website/widgets/form/frame.md b/website/widgets/form/frame.md index 8223a62ced..7b593cf789 100644 --- a/website/widgets/form/frame.md +++ b/website/widgets/form/frame.md @@ -20,6 +20,16 @@ q.page['example'] = ui.form_card(box='1 1 7 7', items=[ ]) ``` +## With document + +The frame is also a preffered way for displaying documents. Simply provide a path to the PDF file. + +```py +q.page['example'] = ui.form_card(box='1 1 7 7', items=[ + ui.frame(path='/assets/examples/sample-document.pdf') +]) +``` + ## With custom HTML For cases when you want to build the embedded page yourself, you can use the `content` attribute that