PyScript-Demos/file upload.html at main · AviratGupta/PyScript-Demos · GitHub

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>upload a file</title>
  <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
  <script defer src="https://pyscript.net/alpha/pyscript.js"></script>


    <py-env>
    - pandas
    - numpy
    - matplotlib
    </py-env>
</head>
<body>
        <h1>py-script : How to read an Image from Local File system using File Upload</h1>
            <p>Upload a csv File</p>
            <ol>
              <li>
                <label for="upload">File Upload:</label>
                <input type="file" name="upload" id="upload">
              </li>
            </ol>
        <p id="content"></p>
<py-script>
    import asyncio
    import js
    from js import document, FileReader
    from pyodide import create_proxy

    def read_complete(event):
        # event is ProgressEvent
        content = document.getElementById("content");
        content.innerText = event.target.result

    async def process_file(x):
        fileList = document.getElementById('upload').files

        for f in fileList:
            # reader is a pyodide.JsProxy
            reader = FileReader.new()
            # Create a Python proxy for the callback function
            onload_event = create_proxy(read_complete)
            #console.log("done")
            reader.onload = onload_event
            reader.readAsText(f)

        return
    def main():
        # Create a Python proxy for the callback function
        file_event = create_proxy(process_file)

        # Set the listener to the callback
        e = document.getElementById("upload")
        e.addEventListener("change", file_event, False)

    main()


</py-script>
<div id="container"></div>
</body>
</html>