Pyscript File Handling

[Work in progress]

Useful PyScript file handling examples for all combinations: local/remote files and import/export.

Intro

This blog post is the result of this discussion on GitHub and is supposed to supply boilerplate code for simple file handling in PyScript.

There are two main operators import and export for two different data types non-binary like string data of a csv and binary like xlsx, pdf etc. as well a two different modes local or remote files where local means your local file system and remote intends remotely stored files under a different domain (URI).

The following 6 of the following 8 combinations are adressed here:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

Import
├── Local
│   ├── Non-binary
│   └── Binary
└── Remote
    ├── Non-binary
    └── Binary
Export
├── Local
│   ├── Non-binary
│   └── Binary
------------------
└── Remote
    ├── Non-binary
    └── Binary

Remote exports however do not make much sense. If you have access to whatever file system, it will always be the export local workflow. Else you would need to have some kind of API/Server listening which is not covered here.

Usage

Jump to the respective section on the right and copy the code of interest. Head to the bottom of this page, paste it in the blue execution cell and execute it with a click on the play button.

1. Import

1.1 Local

1.1.1 Non-binary

This example is based on John Hanley’s version.

Uses the browser’s file picker, loads any file and prints it.

Steps:

1. Optional: e.g. download this small test csv or set up any other text-based file on your device.
2. Copy the below code, paste it in the blue execution cell and execute it with a click on the play button.
3. Click the Read Local File button and choose the file
4. If everything worked, you will see the file’s content printed below.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

import asyncio
import sys
from js import alert, document, Object, window
from pyodide import create_proxy, to_js

async def file_select(event):
	try:
		options = {
			"multiple": False,
			"startIn": "downloads"
		}

		fileHandles = await window.showOpenFilePicker(Object.fromEntries(to_js(options)))
	except Exception as e:
		console.log('Exception: ' + str(e))
		return

	for fileHandle in fileHandles:
		file = await fileHandle.getFile()
		content = await file.text()
		print(content)

def setup_button():
	# Create a Python proxy for the callback function
	file_select_proxy = create_proxy(file_select)

	# Set the listener to the callback
	document.getElementById("file_select").addEventListener("click", file_select_proxy, False)

setup_button()

This code simply prints the file content as text. From here on you could just as well read in pandas or display it formatted as proper HTML.

1.1.2 Binary

Same to above.

Steps:

1. Optional: e.g. download this small test xlsx
2. Copy the below code, paste it in the blue execution cell and execute it with a click on the play button.
3. Click the Read Local File button and choose the file
4. If everything worked, you will see the file’s content printed below.

1.2 Remote

1.2.1 Non-binary

1.2.2 Binary

2. Export

2.1 Local

2.1.1 Non-binary

2.1.2 Binary

Read Local File