py-script Demos: image upload form

Upload a File (.jpg or .png)

File Upload:

import base64 import pyodide from js import btoa, FileReader, Image # Handle end of loading loading = document.getElementsByClassName("loading-container")[0] loading.style.display = "none" form = document.getElementById("upload_form") form.style.display = "block" # event handler def write_output(val): """Write something to `#output` div""" output = document.getElementById("output") output.textContent = str(val) def get_upload(): """Load `input#upload` instance from DOM""" upload = document.getElementById("upload") return upload def reader_handler(event): """Event listener for FileReader load""" img_data = event.target.result create_and_display_img(img_data) def upload_handler(event): """Event listener/top-level controller to handle changing of #upload input""" reader = FileReader.new() reader.addEventListener("load", pyodide.create_proxy(reader_handler)) target_file = event.target.files.item(0) # pyodide.JsProxy obj's not subscriptable reader.readAsBinaryString(target_file) def create_and_display_img(img_data): # Create image from binary data img = Image.new() img.src = "data:image/jpeg;base64," + btoa(img_data) # Append to container container = document.getElementById("container") container.append(img) upload = get_upload() upload.addEventListener("change", pyodide.create_proxy(upload_handler))

The code is here:

https://github.com/pyscript/pyscript/blob/img_form/pyscriptjs/examples/img_form.html

This is the pyscript code inside the html page

import base64
import pyodide

from js import btoa, FileReader, Image

# Handle end of loading

loading = document.getElementsByClassName("loading-container")[0]
loading.style.display = "none"
form = document.getElementById("upload_form")
form.style.display = "block"

# <input> event handler

def write_output(val):
  """Write something to `#output` div"""
  output = document.getElementById("output")
  output.textContent = str(val)

def get_upload():
  """Load `input#upload` instance from DOM"""
  upload = document.getElementById("upload")
  return upload

def reader_handler(event):
  """Event listener for FileReader load"""
  img_data = event.target.result
  create_and_display_img(img_data)

def upload_handler(event):
  """Event listener/top-level controller to handle changing of #upload input"""
  reader = FileReader.new()
  reader.addEventListener("load", pyodide.create_proxy(reader_handler))
  target_file = event.target.files.item(0)  # pyodide.JsProxy obj's not subscriptable
  reader.readAsBinaryString(target_file)

def create_and_display_img(img_data):
  # Create image from binary data
  img = Image.new()
  img.src = "data:image/jpeg;base64," + btoa(img_data)

  # Append to container
  container = document.getElementById("container")
  container.append(img)

upload = get_upload()
upload.addEventListener("change", pyodide.create_proxy(upload_handler))