CODEWITHSUNDEEP
javascripthtmlfilereader
user3636706
user3636706

Reputation: 207

Javascript dynamically show local file

I have a local text file which is kept changing by other programs. I want to write a html and javascript based web page to show the content of file dynamically. I have searched in google and found that most solutions require to get this text file via html element. I wonder if there is a way to get the file via a fixed path(lets say it is a string of the file directory) in javascript. I am using Javascript fileReader. Any help will be appreciated.

Upvotes: 1

Views: 1636

Answers (4)

Pravin
Pravin

Reputation: 1701

you can use nodejs to watch for a filechange using watchfile module, if you just want to watch the filechange and its content. you can run following code using node, but it only consoles the file changed in your terminal. 

    var fs=require('fs'); 
    fs.watchFile('message.text', function (curr, prev) { //listens to file change
            fs.readFile('message.text', function(err,data){ //reads the file
                console.log(data.toString()); //consoles the file content
            });
          });

Upvotes: 0

enhzflep
enhzflep

Reputation: 13089

What you can do is allow the user to choose the file of interest, using a file-input. Once done, the browser wil have access to the file, even though the JS wont have access to the file's full-path.

Once the user has chosen the file, you can reload it and refresh the view pretty-much as often as you please.

Here's a short demo, using a file input (<input type='file'/>) and an iframe. You can pick pretty much anything the browser will normally display, though there are limits on the size of the file that will work - due to the limit of the length of a URL - the file's data is turned into a data-url and that url is set as the source of the iframe.

As a demo, pick a file and then load it. Now, open the file in another program and change it. Finally, press the load button once again - the new content now fills the iframe. You can trigger the loading of the file by a timer or any other event in the page. As far as I'm aware, you cannot re-load it when it changes, since there's no notification from the OS - you have to use a button, timer, element event or whatever. Basically, you have to poll for changes.

<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}

window.addEventListener('load', onDocLoaded, false);

function onDocLoaded()
{
    // uncomment this line for on-demand loading.
    byId('loadBtn').addEventListener('click', onLoadBtnClick, false);
}

// fileVar is an object as returned by <input type='file'>
// tgtElem is an <iframe> or <img> element - can be on/off screen (doesn't need to be added to the DOM)
function loadFromFile(fileVar, tgtElem)
{
    var fileReader = new FileReader();
    fileReader.onload = onFileLoaded;
    fileReader.readAsBinaryString(fileVar);
    function onFileLoaded(fileLoadedEvent)
    {
        var result,data;
        data = fileLoadedEvent.target.result;
        result = "data:";
        result += fileVar.type;
        result += ";base64,";
        result += btoa(data);
        tgtElem.src = result;
    }
}

function onLoadBtnClick(evt)
{
    var fileInput = byId('mFileInput');
    if (fileInput.files.length != 0)
    {
        var tgtElem = byId('tgt');
        var curFile = fileInput.files[0];
        loadFromFile(curFile, tgtElem);
    }
}

</script>
<style>
</style>
</head>
<body>
    <button id='loadBtn'>Load</button><input id='mFileInput' type='file'/><br>
    <iframe id='tgt'></iframe>
</body>
</html>

Upvotes: 0

Billy
Billy

Reputation: 2448

How much information does the text file hold, Depending on your scenario it might be worth looking into javascript localstorage W3SCHOOLS local storage. Would that help your situation ?

Upvotes: 0

Max Bumaye
Max Bumaye

Reputation: 1009

This is not possible using javascript running inside the browser. You will not be able to do anything outside the browser.

EDIT:

You could run a Node.js server though that runs on localhost and does your file operations you desire. You could build a API so your html page that you load in the browser calls your serverscript to do your file operations.

Do you understand what I mean?

Upvotes: 2

Related Questions