Skip to main content

File Upload

Use this component when you wish to collect files.

You can upload files either by drag&drop or by clicking the upload button and choosing a file from your local file system.

The name attribute indicates how to reference this component in the query arguments: q.args.<name-attr>.

You can see the API for ui.file_upload or check the interactive example in Tour app.

Basic file upload#

file_upload-0

q.page['example'] = ui.form_card(box='1 1 4 4', items=[    ui.file_upload(name='file_upload', label='File Upload')])

With constraints#

It's common to want to allow your users to only upload files with very specific parameters, for example:

  • Decide whether the user should upload single or multiple files.
  • A specific file type with extensions like pdf, png etc.
  • A file that is less than 50MB in size.
  • In case of multiple files, make sure that the total size does not exceed a specified limit.

The good news is Wave is flexible enough to support all these cases!

file_upload-1

q.page['example'] = ui.form_card(box='1 1 4 4', items=[    ui.file_upload(        name='file_upload',        label='File Upload',        multiple=True,        file_extensions=['pdf'],        max_file_size=50, # Specified in MB.        max_size=100, # Specified in MB.    )])

Setting width and height#

In addition to the width attribute that is present on every form component, file upload provides also a way to control height via the height attribute. It supports all the CSS units, however % may not always work as you could expect so we advise using static units like px, rem etc. instead.

file_upload-2

q.page['example'] = ui.form_card(box='1 1 4 4', items=[    ui.file_upload(name='file_upload', label='File Upload', width='200px', height='200px')])

Compact file upload#

When you need just a single file to be uploaded and don't have too much space to waste.

file_upload-3

q.page['example'] = ui.form_card(box='1 1 4 4', items=[    ui.file_upload(name='file_upload', label='File Upload', compact=True)])