How do you save a file to a directory given by an input type="text" with php?

Question

I have a html page with jQuery and I used ajax to send data to the a php file to save the data.
I have seen other questions like this but none of them seemed to match my purpose.

The data is an iframe's srcdoc.

My html looks like this:

<iframe srcdoc="<h1>hello</h1>" id="iframe"></iframe>
<br />
<input type="text" placeholder="Filename to save as..." id="fn">
<input type="button" value="Save" onclick="saveDoc(document.querySelector('#fn').value)">

My jQuery and JS looks like this:

function saveDoc(e) {
  let iframe = document.querySelector("#iframe");
  let data = {"srcdoc": iframe.srcdoc, "lnk": e};

  $.ajax({
    type: "POST",
    url: "saver.php",
    dataType : "text",
    contentType: "application/json",
    data: data,
    cache: false,
    timeout: 3000,
    success: function (data) {
        alert("SUCCESS");
        console.log(data);
    },
    error: function (e) {
        alert(e);
    }
  });
}

And my php code looks like this:

<!doctype html>
<html>
<body>
<?php
  if (isset($_POST["lnk"]) && isset($_POST["srcdoc"])) {
    $myfile = fopen($_POST["link"], "w");
    fwrite($myfile, $_POST["srcdoc"]);
    fclose($myfile);
    echo $_POST["lnk"];
    echo "\n <br/>";
    echo $_POST["srcdoc"];
  } else {
    echo "Error";
  }
?>
</body>
</html>

When I run it, I get an alert message saying "SUCCESS". And the console.log gives me:

<!doctype html>
<html>
<body>
Error</body>
</html>

What is happening here, and what am I doing wrong?

Well first of all, `lnk` and `link` are two different things … — misorude, Feb 17 '20 at 10:14
(How dangerous this is, without applying any additional checks, is clear to you, I hope? This could currently be used to overwrite any existing file that your PHP has write access to.) — misorude, Feb 17 '20 at 10:15
`"lnk": e` – what do you think you are actually passing as `e` here? Your function call did not specify any parameter. — misorude, Feb 17 '20 at 10:17
This is the function call, `onclick="saveDoc()"` (implicitly), and you are not passing in any value there. — misorude, Feb 17 '20 at 10:27
Oh, right. I actually did put it but I forgot to put it in the example. Edited. — Angshu31, Feb 17 '20 at 10:30
`contentType: "application/json"` - you are explicitly sending this to the server as JSON - so you can not access it via `$_POST`. Either remove that contentType, so that it can fall back to the normal way of sending form data, or go inform yourself how to actually read POSTed JSON data in PHP. — misorude, Feb 17 '20 at 10:35
@misorude Thanks, that did it. If you posted that as an answer you'd get 15. — Angshu31, Feb 17 '20 at 10:40

score 1 · Accepted Answer · answered Feb 17 '20 at 10:43

1

contentType: "application/json"

You are explicitly sending this to the server as JSON - so you can not access it via $_POST. (PHP only populates $_POST for Content-Types application/x-www-form-urlencoded or multipart/form-data.)

Either remove contentType, so that it can fall back to the normal way of sending form data, or go read up on how to actually read POSTed JSON data in PHP. (That would involve reading the data from php://input first, see Receive JSON POST with PHP)

answered Feb 17 '20 at 10:43

misorude

3,381
2
9
16

The data isn't being encoded as JSON, so using the `php://input` for reason JSON wouldn't work without additional client-side work. – Quentin Feb 17 '20 at 10:46
Didn't expect you to actually do it. – Angshu31 Feb 17 '20 at 10:47
@Quentin that is correct, of course, the data is not actually send as JSON, and jQuery doesn’t automatically encode it as such, based on the contentType. If this should actually send JSON and be processed on the server side as such, a `JSON.stringify` would still be necessary. – misorude Feb 17 '20 at 10:50

How do you save a file to a directory given by an input type="text" with php?

1 Answers1