Geek Answers Handbook

Check if the file has changed using the HTML5 file API

Ok, so I have a program that outputs some specific data to a file with a shared tab.

I used Excel to open and view the contents of a file, however I found that I insist on blocking every file that it opens, to be incredibly annoying as my program will crash if I leave the file open in Excel ... but I would really like the data to gently update after each program start, so I don’t need to close and re-open the file all the time.

So, I decided that it would be easier to use Javascript to parse the file and display it in the html table, and that was it. I instantly knocked something together. Now my program does not crash if I leave the displayed file, however it still does not update ... and I have to open the newly created file every time.

So, I was wondering if there is a mechanism by which my Javascript can be somehow notified of a file change by another process? I know this is unlikely, but I would like to avoid just polling the file for obvious reasons.

I am very familiar with JS, but HTML5 and the new APIs are all new to me.

+8
javascript html5
source share
2 answers

I do not believe that the File API has any event for changing a file, only progress events, etc.

You can use the survey. Remember lastModifiedDate File , and then when the polling function fires, get a new instance of File to enter and see if lastModifiedDate has changed.

This works for me in Chrome, for example: Live Copy | A source

 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8"> <title>Watch for a file change</title> <style type='text/css'> body { font-family: sans-serif; } </style> </head> <body> <input type='file' id='filename'> <input type='button' id='btnStart' value='Start'> <script type='text/javascript'> (function() { var input; var lastMod; document.getElementById('btnStart').onclick = function() { startWatching(); }; function startWatching() { var file; if (typeof window.FileReader !== 'function') { display("The file API isn't supported on this browser yet."); return; } input = document.getElementById('filename'); if (!input) { display("Um, couldn't find the filename element."); } else if (!input.files) { display("This browser doesn't seem to support the `files` property of file inputs."); } else if (!input.files[0]) { display("Please select a file before clicking 'Show Size'"); } else { file = input.files[0]; lastMod = file.lastModifiedDate; display("Last modified date: " + lastMod); display("Change the file"); setInterval(tick, 250); } } function tick() { var file = input.files && input.files[0]; if (file && lastMod && file.lastModifiedDate.getTime() !== lastMod.getTime()) { lastMod = file.lastModifiedDate; display("File changed: " + lastMod); } } function display(msg) { var p = document.createElement('p'); p.innerHTML = msg; document.body.appendChild(p); } })(); </script> </body> </html>
+9
source share

While the TJ Crowder Rule is correct, the Chrome implementation seems to violate the specification.

Each blob must have an internal snapshot state, which must be initially set to the state of the underlying store, if it exists, and must be saved using a structured clone. Additional regulatory definitions for snapshot status can be found for files.

When a file is selected, the input has a snapshot of the content at that point. Local changes to the disk do not update the snapshot.

+2
source share

More articles:


All Articles