Can't read contents of a file #16

gregnordin · 2024-11-28T07:51:20Z

gregnordin
Nov 28, 2024

@laffra: I'm trying to read the contents of a user-specified text file with the code appended below as main.py. I keep getting an error because ltk.File evidently does not generate the full path of the file and instead gives something like C:\fakepath\testfile.txt where testfile.txt is the correct name of the file I selected. I assume I'm missing something, but I don't know what. Is there a way to read the contents of a text file?

import ltk

def read_file(file):
    with open(file, encoding="utf-8") as fp:
        file_text = ltk.create("<script>").text(fp.read())
    return file_text

def feedback(text):
    ltk.find("#feedback").html(text).css("text-align", "left")

@ltk.callback
def handle_file(event):
    element = ltk.find(event.target)
    kind = element.prop("type")
    feedback(f"{kind}: {element.val()}")
    file_text = read_file(element.val())
    ltk.html(file_text).appendTo(ltk.find("body"))

def create():
    return ltk.VBox(
        ltk.Heading1("Can we read a file?"),
        ltk.File().on("change", handle_file),
        ltk.Text("File name goes here").attr("id", "feedback"),
    )

create().appendTo(ltk.find("body"))

gregnordin · 2024-11-28T17:30:01Z

gregnordin
Nov 28, 2024
Author

I find I can read a text file using only pyscript with the code below. Is there a way to do it with ltk?

# main.py
from js import document, console, FileReader
from pyodide.ffi import create_proxy

def read_file(event):
    try:
        # Get the selected file
        files = event.target.files
        if not files or files.length == 0:
            return

        file = files.item(0)  # Using item() instead of indexing

        def handle_load(e):
            content = e.target.result
            output_div = document.getElementById("output")
            output_div.innerHTML = f"<pre>{content}</pre>"

        # Create a FileReader
        reader = FileReader.new()
        reader.onload = create_proxy(handle_load)

        # Read the file
        reader.readAsText(file)
    except Exception as e:
        console.error(f"Error: {str(e)}")
        output_div = document.getElementById("output")
        output_div.innerHTML = f"<pre>Error reading file: {str(e)}</pre>"

# Add event listener to the file input
file_input = document.getElementById("fileInput")
file_input.addEventListener("change", create_proxy(read_file))

#-----------------------------------------------------------------------------
# index.html
<!DOCTYPE html>
<html>

<head>
    <title>PyScript File Reader</title>
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css">
</head>

<body>
    <h1>PyScript File Reader</h1>
    <input type="file" id="fileInput" accept=".txt">
    <div id="output"></div>

    <script type="py" src="./main.py"></script>
</body>

</html>

0 replies

laffra · 2024-11-28T18:16:44Z

laffra
Nov 28, 2024
Maintainer

In LTK, I would use ltk.File(handler) as shown in the LTK Kitchensink using LTK >v0.2.8. See the source for ltk.File here

0 replies

gregnordin · 2024-11-29T01:06:25Z

gregnordin
Nov 29, 2024
Author

Awesome--that works great! Thank you so much!

Here is some code that exercises the new file reading ability in case it is useful for anyone.

#--------------------------------------------------------------------
# main.py
import ltk

@ltk.callback
def loaded_file(file, content):
    ltk.find("#content").html(content)

def create():
    return ltk.VBox(
        ltk.Heading1("Can we read a file?"),
        ltk.File(loaded_file),
        ltk.Label("File contents:"),
        ltk.Preformatted(
            "File contents will be shown here after selecting file.",
            {
                "margin-left": 20,
                "margin-right": 20,
                "padding": 8,
                "background-color": "lightyellow",
                "border": "1px solid gray",
            },
        ).attr("id", "content"),
    )

create().appendTo(ltk.find("body"))

#--------------------------------------------------------------------
# index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Try to read file</title>

    <!-- Recommended meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <!-- PyScript CSS -->
    <link rel="stylesheet" href="https://pyscript.net/releases/2024.10.2/core.css">

    <!-- This script tag bootstraps PyScript -->
    <script type="module" src="https://pyscript.net/releases/2024.10.2/core.js"></script>

    <!-- Import jQuery - used in ltk/jquery.py -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-ui@1.13.2/dist/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.css" />
</head>

<body>
    <script type="py" src="./main.py" config="./pyscript.toml"></script>
</body>

</html>

#--------------------------------------------------------------------
# pyproject.toml
packages = ["pyscript-ltk"]
[files]
"https://raw.githubusercontent.com/pyscript/ltk/main/ltk/ltk.js" = "ltk/ltk.js"
"https://raw.githubusercontent.com/pyscript/ltk/main/ltk/ltk.css" = "ltk/ltk.css"

0 replies

laffra · 2024-11-29T08:13:12Z

laffra
Nov 29, 2024
Maintainer

Can you put that example on pyscript.com? Then we can link to it from the LTK docs. Chris

…

On Fri, Nov 29, 2024 at 2:06 AM Greg Nordin ***@***.***> wrote: Awesome--that works great! Thank you so much! Here is some code that exercises the new file reading ability in case it is useful for anyone. #-------------------------------------------------------------------- # main.py import ltk @ltk.callback def loaded_file(file, content): ltk.find("#content").html(content) def create(): return ltk.VBox( ltk.Heading1("Can we read a file?"), ltk.File(loaded_file), ltk.Label("File contents:"), ltk.Preformatted( "File contents will be shown here after selecting file.", { "margin-left": 20, "margin-right": 20, "padding": 8, "background-color": "lightyellow", "border": "1px solid gray", }, ).attr("id", "content"), ) create().appendTo(ltk.find("body")) #-------------------------------------------------------------------- # index.html <!DOCTYPE html> <html lang="en"> <head> <title>Try to read file</title>  <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0">  <link rel="stylesheet" href="https://pyscript.net/releases/2024.10.2/core.css">  <script type="module" src="https://pyscript.net/releases/2024.10.2/core.js"></script>  <script ***@***.***/dist/jquery.min.js"></script> <script ***@***.***/dist/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.css" /> </head> <body> <script type="py" src="./main.py" config="./pyscript.toml"></script> </body> </html> #-------------------------------------------------------------------- # pyproject.toml packages = ["pyscript-ltk"] [files] "https://raw.githubusercontent.com/pyscript/ltk/main/ltk/ltk.js" = "ltk/ltk.js" "https://raw.githubusercontent.com/pyscript/ltk/main/ltk/ltk.css" = "ltk/ltk.css" — Reply to this email directly, view it on GitHub <#16 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE4XAKF3KK3GHZG5MUNYKKT2C642NAVCNFSM6AAAAABSUPZQKSVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTCNBRGEZDCMQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

0 replies

gregnordin · 2024-11-29T20:12:16Z

gregnordin
Nov 29, 2024
Author

I put the example on pyscript.com at https://pyscript.com/@gnordin/ltk-read-a-file/latest. If there is a different place you would like it, please let me know. I've not really used pyscript.com before so I don't know what the norms are in how to share things there.

0 replies

Navigation Menu

Uh oh!

Can't read contents of a file #16

Uh oh!

{{title}}

Uh oh!

Replies: 5 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Can't read contents of a file #16

Uh oh!

gregnordin Nov 28, 2024

Replies: 5 comments

Uh oh!

gregnordin Nov 28, 2024 Author

Uh oh!

laffra Nov 28, 2024 Maintainer

Uh oh!

gregnordin Nov 29, 2024 Author

Uh oh!

laffra Nov 29, 2024 Maintainer

Uh oh!

gregnordin Nov 29, 2024 Author

gregnordin
Nov 28, 2024

gregnordin
Nov 28, 2024
Author

laffra
Nov 28, 2024
Maintainer

gregnordin
Nov 29, 2024
Author

laffra
Nov 29, 2024
Maintainer

gregnordin
Nov 29, 2024
Author