Member Avatar for mousa.khaleel13 
Anyone can please help in this. I need to assign a path for a text file in a variable to be shown later on in html here's my code:

<html>

<head>   
</head>

<body>

<!-- Header -->
<header>
</header>
<!-- End Header -->


<!-- Main -->
<section id="main">


     <script type="text/javascript">

        var reader = new FileReader();

        function readText(that){

            if(that.files && that.files[0]){
                var reader = new FileReader();
                reader.onload = function (e) {  
                    var output='myFile.txt'; // Here's the variable I want to assign my path in         

                document.getElementById('text').innerHTML= output;
                };//end onload()
                reader.readAsText(that.files[0]);
        } 
</script>

        <!-- Cols -->
        <div class="cols">
            <h2>Contact Us</h2>
            <!-- Col -->

                  <div id="text"></div>

            <!-- End Col -->

        <!-- End Cols -->
        </div>

</section>
<!-- End Main -->

</body>
</html>
  • 4 Contributors
  • 7 Replies
  • 4K Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by AleMonteiro

Dani AI

Generated

Quick clarification to what gon1387 and radhakrishna.p asked: browsers will not expose a user’s real local file path to JavaScript. From an <input type="file"> you get a File object and its name (e.g., file.name), not a filesystem path; you can read its contents only after the user explicitly selects it. This is by design for security. (developer.mozilla.org)

If your text file lives on your server, store a URL (not a local path) in your JS and fetch the contents into the page. For example:

const url = "/content/myFile.txt";           // URL on your server
const res = await fetch(url, { cache: "no-store" });
if (!res.ok) throw new Error(res.status);
document.getElementById("text").textContent = await res.text();

Fetch is promise-based and works for both same-origin and CORS-enabled cross-origin requests. (developer.mozilla.org)

If the user uploads a file and you want to display or link to it without uploading, create a temporary object URL instead of trying to read a path:

const file = document.querySelector('input[type="file"]').files[0];
const href = URL.createObjectURL(file);
// use `href` in an <a> or <iframe>, then later:
URL.revokeObjectURL(href);

Object URLs represent in-memory blobs and should be revoked when no longer needed to avoid leaks. (developer.mozilla.org)

To let someone edit the server file and persist changes, you need a server endpoint (your question implies this). From the browser you would send the edited text back, e.g.:

await fetch("/api/files/myFile.txt", {
  method: "PUT",
  headers: { "Content-Type": "text/plain" },
  body: editedText
});

If the page and API are on different origins, ensure the server sets the appropriate CORS headers (for example, Access-Control-Allow-Origin). (developer.mozilla.org)

In short: no client file paths; use URLs for server files, fetch() to read/write, and an API to save edits.

Recommended Answers

All 7 Replies

Member Avatar for gon1387

Is the text file local or retrieved on the net?

Member Avatar for radhakrishna.p

are you asking for storing the file to a new path or its original path?

i am getiing little bit confusion on your question

pls clarify me so that i will help you soon

Member Avatar for gon1387

Have you fixed it?

Member Avatar for mousa.khaleel13

sorry for being late.
I want to save a text file path in the js variable so i can retrieve it later inside my html.
I want to retrieve the text inside a file that is uploaded on my server also but so when someone needs to edit the text to go inside the file edit and save it and the changes he did to be applied in the website.
Any help?

Member Avatar for mousa.khaleel13

thank you AleMonteiro!

Member Avatar for AleMonteiro

If your question is resolved, please set the post as Solved and also mark the answers that was helpfull to you.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.