Upload

The Data Upload widget allows you to upload files from your local system to your notebook environment, offering the feature as a customizable button.

Basic usage

First, create a Data Upload widget and configure the necessary settings. For example, you can set the output variable to store the file path of the uploaded file.

Configuration

To configure the widget, you need to either set the destination folder or bind a Python variable that contains a string with the project path.

In the context of Python, after uploading a file, the user will have access to automatically injected variables related to the uploaded files:

• $out: Contains a dictionary with filepath and filename properties.
• $out_fullpath: Contains a string with the full absolute path of the uploaded file(s).
• $out_project_path: Contains the path of the uploaded files, starting from the project root.

These variables can be used, for instance, in an image widget for previewing if an image file was uploaded. Here is an example of how you can use these in a Python script:

# Assuming your output variable name is `uploaded_file`

# Use the fullpath for opening the file in Python
with open(uploaded_file_fullpath, 'rb') as file:
    # Process the file
    pass

# Use the project path to display or use the file in other widgets
image_widget_path = uploaded_file_project_path

File type options

You can specify the types of files that are allowed for upload using the Accept setting. The options are:

• image/*: Images
• video/*: Videos
• audio/*: Audio files
• .pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt: Documents
• .xls,.xlsx,.csv: Spreadsheets
• .txt: Text files
• .zip,.rar,.7z: Compressed files
• */*: Any filetype

API reference

Basic

Setting name	Type	Description	Default
Output variable	string/variable_name	Name of the variable to store the file path
File path	string/filesystem_path	Path where the file will be stored	./myfile
Mandatory	boolean	If true, execution stops until a file is uploaded	false
Accept	string	Accepted file types	*/*
Mode	default | small	Size of the upload button	default
Title	string	Title to display above the upload button
Subtitle	string	Subtitle to display above the upload button

Style

Container

Setting name	Type	Description	Default
Container padding	string/css_padding	Padding of the container.

Alignment

Setting name	Type	Description	Default
Vertical alignment	start | center | end	Vertical alignment of the container	center
Horizontal alignment	left | center | right	Horizontal alignment of the container	center

See also

• All widgets — browse the full widget catalog.
• Download — the counterpart for letting users download files.
• Image — preview uploaded image files.