Edit file on server from a webpage

Question

What I want to do is to have a set of editable Excel files on my webpage:

• I give links to what for the user represents an Excel file
• With a click, the user's default program for editing Excel files (say, MS Excel) should open
• After finishing editing, the file should be uploaded to my server transparently for the user, and next time the user visits my page, they should see their edited file and be able to edit it again

What I have considered:

• JavaScript Excel-like grid. However, I did not find a JavaScript library with sufficient features, such as easily moving rows (any advice of a good JavaScript Excel component?)
• Saving to DropBox / Google Docs /... using their APIs. However, it requires the user to have an account, and it will probably require me to manage user's DropBox passwords (and not all users will want to share passwords with me). Also, I will need to have interfaces to Google Drive, Miscrosoft OneDrive, and who knows how many other services.
• Allow the user to download the file and rely on the user to upload it back again. However, this is too complicated for the user, and the users will forget to upload the files, which means losing their edits. Any way or uploading the file automatically upon closing?
• A macro in my Excel files that would contact my server before exiting. However, this requires the user to enable macros (security alarm) and may be unreliable if the connection breaks. I did not evaluate whether this is technically possible.

Or what is the best / simplest way to achieve this?

(I know how to generate Excel files and how to open them from the webpage; my problem is how to get the user's edits back to the server transparently for the user.)

Answer 1

I think the easiest way to do this ("get the user's edits back to the server transparently for the user") is to use AJAX (JS) requests to PHP scripts.

AJAX is great for doing things in the background (asynchronously), but it can't edit the server. Just add an event listener in JS (an onchange or onblur, perhaps) and send an AJAX request every time the user edits the file.

PHP is a great server-side scripting language, and you can edit files with it.

---

EDIT: Example (on request)

Assuming that the Excel file is stored in a string in a <textarea> for simplicity (for now), you can set a listener to get the data from it (in jQuery), and send an AJAX request:

HTML:

<textarea id="excel"></textarea>

JS:

$("#excel").change(function() {
    var excelFile = $(this).val();
    $.ajax({
        url: "updateFile.php",
        method: "post",
        data: { data: excelFile }
    });
});

PHP (updateFile.php):

<?php
    $data = $_POST["data"];
    $file = fopen("FILENAME.xlsx", "w+");
    fwrite($file, $data);
    fclose($file);
?>