Outputting information from the local file directory in javascript code index file

🎈 Using Streamlit
1

I have an index html file in which when a text is loaded, its words are displayed and there is a dict.txt file in a local folder that contains the meanings of these words. When you click on a word from the dict file, its value should be displayed, but it is not displayed.

How can I make streamlit html see local files in a directory and output information from them?

Index.html

<!DOCTYPE html>
<html>
<head>
    <title>Upload words</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>Upload and print file</h1>

    <input type="file" id="file-input" accept=".txt" />

    <div id="words-list"></div>
    <div id="word-description"></div>

    <script>
        var fileInput = document.getElementById('file-input');
        var wordsList = document.getElementById('words-list');
        var wordDescription = document.getElementById('word-description');
        var wordList = [];

        fetch('./dict.txt')
            .then(response => response.text())
            .then(data => {
                wordList = parseDictionary(data);
            });

        fileInput.addEventListener('change', function(e) {
            var file = e.target.files[0];

            var reader = new FileReader();
            reader.onload = function(e) {
                var contents = e.target.result;
                var words = processText(contents);
                displayWords(words);
            };
            reader.readAsText(file);
        });

        function processText(text) {
            var words = text.split(/\s+/);
            return words;
        }

        function parseDictionary(dict) {
            var lines = dict.split('\n');
            var wordList = {};

            for (var i = 0; i < lines.length; i++) {
                var line = lines[i].trim();
                if (line === '') continue;

                var parts = line.split(':');
                var word = parts[0].trim();
                var description = parts[1].trim();

                wordList[word] = description;
            }

            return wordList;
        }

        function displayWords(words) {
            wordsList.innerHTML = '';

            for (var i = 0; i < words.length; i++) {
                var word = words[i];
                var wordSpan = document.createElement('span');
                wordSpan.innerText = word + ' ';
                wordSpan.addEventListener('click', createShowWordHandler(word));

                wordsList.appendChild(wordSpan);
            }
        }

        function createShowWordHandler(word) {
            return function() {
                if (wordList[word]) {
                    wordDescription.innerText = wordList[word];
                } else {
                    wordDescription.innerText = 'Description not found';
                }
            };
        }
    </script>
</body>
</html>
2

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.