Read image file with Pyodide in ImJoy

PythonPlugin.imjoy.html

<docs lang="markdown">
[TODO: write documentation for this plugin.]
</docs>

<config lang="json">
{
  "name": "PythonPlugin",
  "type": "web-python",
  "version": "0.1.0",
  "description": "[TODO: describe this plugin with one sentence.]",
  "tags": [],
  "ui": "",
  "cover": "",
  "inputs": null,
  "outputs": null,
  "flags": [],
  "icon": "extension",
  "api_version": "0.1.8",
  "env": "",
  "permissions": [],
  "requirements": ["pillow"],
  "dependencies": []
}
</config>

<script lang="python">
from imjoy import api
from PIL import Image

class ImJoyPlugin():
    def setup(self):
        api.log('initialized')

    async def process(self, file_name, bytes):
        # convert to python bytes
        bytes = bytes.to_py().tobytes()
        file = io.BytesIO(bytes)
        file.name = file_name
        image = Image.open(file)
        await api.alert(str(image))

    async def run(self, ctx):
        await api.showMessage('Ready!')

api.export(ImJoyPlugin())
</script>

WindowPlugin.imjoy.html

<docs lang="markdown">
[TODO: write documentation for this plugin.]
</docs>

<config lang="json">
{
  "name": "WindowPlugin",
  "type": "window",
  "tags": [],
  "ui": "",
  "version": "0.1.0",
  "cover": "",
  "description": "[TODO: describe this plugin with one sentence.]",
  "icon": "extension",
  "inputs": null,
  "outputs": null,
  "api_version": "0.1.8",
  "env": "",
  "permissions": [],
  "requirements": [],
  "dependencies": [],
  "defaults": {"w": 20, "h": 10}
}
</config>

<script lang="javascript">
class ImJoyPlugin {
  async setup() {
    const buttonElem = document.getElementById('run-btn')
    buttonElem.onclick = ()=>{
        const fileElem = document.getElementById('file')
        const file = fileElem.files[0]
        if(!file){
            api.alert("No file selected")
            return
        }
        const reader = new FileReader();
        reader.onload = async function() {
            const plugin = await api.getPlugin('PythonPlugin')
            await plugin.process(file.name, this.result)
        }
        reader.readAsArrayBuffer(file);
    }
  }

  async run(ctx) {
    
    
    
  }
}

api.export(new ImJoyPlugin())
</script>

<window lang="html">
  <div>
    <input type="file" id="file">
    <button id="run-btn">Run</button>
  </div>
</window>

<style lang="css">

</style>