2

I have a file structure on a web page, and look for a solution for the following scenario:

The chosen file should be downloaded in browser cache and opened (if it's an excel document, open with excel, etc.). Now when the user changes the file, it should be detected and the file should be uploaded again.

Is this even possible with JavaScript? If yes, where do I store the file (temporary internet folder?) and how do I detect the changes?

user3301565
  • 402
  • 5
  • 15
  • 1
    This has nothing to do with Javascript. It is pure HTTP. Be sure to understand the caching part of HTTP and you're good to go. However, some browsers can be stubborn in how they respect caching instructions from the server, so you should be aware of browser caching quirks. – Gerard van Helden Jun 12 '15 at 18:59
  • 1
    You cannot randomly access a user's files on their computer. You would have to have them select a file (like through a file input) and then you could look at like the modification date to see if it has been modified (you would have to store the last mod date somewhere localStorage, server side etc). Though if you know your user is using chrome you could use chromes FileSystem api which allows read/write access to a sandboxed area on the clients computer. – Patrick Evans Jun 12 '15 at 19:03
  • But the file structure shown on the web page is not existing in real, it is a file structure mapped on a couchdb database which is interpreted by a node.js server and served to the front end via socket.io. This file is an attachment of a couchdb document. – user3301565 Jun 12 '15 at 19:04
  • Ah I'm sorry, you want the change in the file to be done *locally* in stead of on the server. In that case, HTTP won't be enough. – Gerard van Helden Jun 12 '15 at 19:06
  • Yes, exactly. I want the user to download the file to a temp folder by clicking on a button, watch this downloaded file and upload it again when he changes it. I know that I don't have access to clients computer with JavaScript, and exactly this is the question. How to do that? – user3301565 Jun 12 '15 at 19:09

3 Answers3

0

The way you describe it: No, that is not possible in JavaScript.
It sounds like you want an FTP client.

When the user changes the file, it should be detected and the file should be uploaded again.

That is not possible due to JS having almost no access to the file system.
The only way you can access a file at all is by requesting the user to select one, see:
How to open a local disk file with Javascript?

So the most you could do would be:

  1. File is downloaded.
  2. Based on browser & settings, file may be opened automatically, or not.
  3. User is presented with a file selection dialog that they can use when they are done editing.
  4. Compare selected file to file on server and upload if changed.

After downloading a file, you have no control over it.
For applications that have a protocol registered (such a steam://, for example), you might be able to request the URL being opened in a program, but that would require an if per file type/program.
Detecting file changes is not at all possible (because you have no access to the file), and uploading again requires the user to select the file manually, using a file dialog.

Community
  • 1
  • 1
Siguza
  • 21,155
  • 6
  • 52
  • 89
  • Hm, i found this, seems to be possible with browser file system Api: https://github.com/filerjs/filer/blob/develop/README.md#watch – user3301565 Jun 12 '15 at 19:22
  • 1
    @user3301565, That is a nodejs library, that works on the server side – Patrick Evans Jun 12 '15 at 19:25
  • No it isn't: "Filer is a POSIX-like file system interface for node.js and browser-based JavaScript." Browser based JavaScript and the loading of the module works via requireJS, so should be working, or? – user3301565 Jun 12 '15 at 19:30
  • @user3301565 The "browser-based JavaScript" means that you can access an IndexedDB or WebSQL database as if it was a file system, you cannot access the actual file system of the client machine. You can verify this by loading Filer and running `new Filer.FileSystem().stat('/A_PATH_THAT_EXISTS',function(err,stats){if(err)throw err;console.log(stats);});` from the console, where `/A_PATH_THAT_EXISTS` should obviously be replaced with an existing path name. Anything other than `/` will result in an error. – Siguza Jun 12 '15 at 19:39
  • Ah, I see, thanks! But couldn't be this the solution for my problem? To store the file in clients local database as attachment instead of saving it to clients file system? Is it possible to open, Edit, and watch a file which is an attachment in a local database? – user3301565 Jun 12 '15 at 20:01
  • @user3301565 No. Such a local database it's still just data inside the JS environment, like variables. – Siguza Jun 12 '15 at 20:27
0

The only way for this to work you would need to have the user select the downloaded file, and then check for modification.

HTML

<label for="excelFile">Select the excel file: </label><input type="file" id="excelFile" />

JS

//Change event to detect when the user has selected a file
document.querySelector("#excelFile").addEventListener("change",function(e){
   //get the selected file
   var file = this.files[0];

   //get the last modified date
   var lastModified = file.lastModified;

   //check lastModified against stored lastModified
   //this assumes you store the last mod in localStorage
   if(localStorage['excelLastMod'] < lastModified){
       //It has modified update last mod
       localStorage['excelLastMod'] = lastModified;

       //do upload
   }
});

If you know your user is using Chrome you can use Chrome's FileSystem api

Patrick Evans
  • 41,991
  • 6
  • 74
  • 87
0

Thanks for your help and ideas. I saw a software (https://www.group-office.com/) which includes this function so there has to be way to do it.

New Idea, using chrome filesystem api (@Siguza already said it):

  • Create file from servers database on users local filesystem with filesystem api
  • open file locally (should work with filesystem:http://www.example.com/persistent/info.txt, or?)
  • poll last changes of file every x seconds
  • if change detected, upload file back to servers database

I saw some problems with excel locking the files Check if file has changed using HTML5 File API but except of that this should work, shouldn't it?

Community
  • 1
  • 1
user3301565
  • 402
  • 5
  • 15