Save input data from user to my own file

Question

I have a webpage with text area. I populate this area with a text file of my own, so the user sees the text when they load the page. I want the user to be able to edit the text in this area and they will click 'save'. This will save to MY file, so that the next time someone opens the page they will get the text that the previous user wrote.

I have been looking for quite a while and cannot find what I need. Some things I found said suggest maybe some php (would prefer not). But I have yet to find a source that describes this exact situation.

Here is some of my HTML code:

<div class="emailEditor">
        <label for="emailEditBox" class="col-2 col-form-label">Email Editor</label>
        <div class="col-10">
            <textarea style = "min-height: 300px;" class="form-control" rows="5" id="emailEditBox"></textarea>
        </div>

        <button id="loadEmail" type="button" class="btn btn-primary" onclick="loadFile()">Load</button>
        <button id="saveEmail" type="button" class="btn btn-danger" onclick="saveFile()">Save</button>
        <button id="previewEmail" type="button" class="btn btn-success" onclick="previewFile()">Preview</button>
    </div>

<div class="emailPreview">
        <label class="col-2 col-form-label">Email Preview</label>
        <div class="emailOutput">
             <!--Preview here (rendered output of the html file)-->
        </div>
</div>

Here is some of my Javascript and Jquery:

<script>
    function loadFile() {
        var reader = new XMLHttpRequest();
        reader.open('GET', "EmailTemplate.html", false);
        reader.send();
        var text = reader.responseText;
        document.getElementById("emailEditBox").value = text;
    }

    function writeFile() {

    }
</script>

<script>
    $(function previewFile(){
        $(".emailOutput").load("EmailTemplate.html");
    });
</script>

The load and preview part are working, but I cannot find a way to save the file.

Something on the server has to update that file you are getting the text from. PHP is one option to do that. — Taplar
– Taplar, Commented Aug 22, 2017 at 19:41
You need to send a POST or PUT to your backend with the text the user entered and save that as the file that gets read. — TW80000
– TW80000, Commented Aug 22, 2017 at 19:42
It would require serverside code to save it.... you can not just update the file from the browser.... that would be scary. — epascarello
– epascarello, Commented Aug 22, 2017 at 19:48
As other commentators have said, there's no way to save to a file system on the client side because that would be crazy bad for security. — Peter Van Drunen
– Peter Van Drunen, Commented Aug 22, 2017 at 19:50
@epascarello It's just for a demo that I'm using for something else completely, don't worry about security. — Twtheo
– Twtheo, Commented Aug 22, 2017 at 19:50

lnx · Accepted Answer · 2017-08-22 19:56:11Z

1

You need server side processing that will receive the data, and then use POST Request to send data to the server. On server-side, you can use for example Node.js if you want a solution in pure JS or use simple old school PHP.

edited Aug 22, 2017 at 19:56

answered Aug 22, 2017 at 19:47

lnx

564 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Save input data from user to my own file

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related