We Keep Coding

Saving a file to server using PHP and JS?

I have been trying this for a few hours now, googling around and trying several approaches. The code is so simple I don't understand why it doesn't work. I am using 000webhost free hosting atm just to test this out.
I literally just wanna pass a variable to the php file for it to save in a text file, in this case "ayy".
Latest code (file does not even get created):
JS Code
function doSave(){
xhr.open("POST", "save.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
xhr.send("ayy");
}
PHP code (save.php)
<?php
file_put_contents('data.txt', file_get_contents('php://input'));
?>
I did also have this code below earlier, however it only created a blank file and would not append any text to it:
index.htm
function doSave(){
var datastr = "ayy";
var xmlhttp = new XMLHttpRequest();
xmlhttp.setRequestHeader('Content-Type', 'application/json');
xmlhttp.open("GET", "save.php", true);
xmlhttp.send(datastr);
}
save.php
<?php
$post_data = $_POST['datastr'];
$f = fopen("data.txt", "w+");
fwrite($f, $post_data);
fclose($f);
?>
Any suggestions why this might not be working? All I can think of is the server not supporting it or something, however I can get it working fine if I specify the variable IN the php file and using a GET request to simply just post the variable. However the data is going to be dynamic so I need to pass it from client-side using js.
Thanks.

Sending images with php?

I'm a php noob forced to add minor functionality to an existing php server. My task is for my php server to return a list of images to the client which will then be displayed on a page.
My JavaScript client code is here:
const http = new XMLHttpRequest();
const url = "http://myaddress.com/myphpserver?";
http.open("GET", url);
http.send();
http.onreadystatechange = (e) => {
console.log(http.responseText);
}
I've tried this code on my server:
$im = imagecreatefrompng("myImage.png");
header('Content-Type: image/png');
imagepng($im);
found here but to no avail
my http.responseText is always empty. Am i going about this the wrong way?

There is no need to send the image as the response from PHP.
What you should do instead instead is return JSON with a URL to the image. Like this:
{
"images": [{
"url": "http://myaddress.com/image_of_cat.jpg"
},
{
"url": "http://myaddress.com/image_of_cat.jpg"
}
]
}
And then with javascript you just set the src attribute of the <img> tag with that URL.
Now you only need to set up a very simple server that serves images from a folder

Does not answer OP's question. Answering for those googlers who actually WANT PHP to send the raw image instead of an image link:
<?php
/* Must be done before headers are sent */
header('Content-Type: image/jpeg');
$path = 'myfolder/myimage.jpg';
$type = pathinfo($path, PATHINFO_EXTENSION);
$data = file_get_contents($path);
$base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);
echo $base64;
?>
(Partially makes use of another stackoverflow answer on a different question on how to encode image, but if you have the string already encoded from somewhere else, that works as well can replaced the $base64 string )

php canvas to image on server

I want to take the image data from my canvas on the client and save it as a .png on my server.
This is the code on my client that gets the image data from the canvas and sends it to saveImage.php:
function render()
{
var imageData = ctx.canvas.toDataURL("image/png");
var postData = "imageData="+imageData;
var ajax = new XMLHttpRequest();
ajax.open("POST","saveImage.php",true);
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.onreadystatechange=function()
{
console.log(ajax.responseText);
}
ajax.send(postData);
}
And this is what saveImage.php looks like:
<?php
if(isset($_POST["imageData"]))
{
$imageEncoded = $_POST["imageData"];
$imageDataExploded = explode(',', $imageEncoded);
$imageDecoded = base64_decode($imageDataExploded[1]);
$filename = time()."image".mt_rand();
$file = fopen("./".$filename.".png","wb");
fwrite($file, $imageDecoded);
fclose($file);
echo $filename;
exit();
}
?>
The code actually works fine, my problem is just that the images that gets created are faulty in some way.
When I try to open one, windows says that it cant show me the image because it doesn't support the format? even though its a .png?
what am I doing wrong here?

You should be encoding your data with encodeURIComponent() before including it in POST data.
You should also be using a framework like jQuery to account for browser differences. I guarantee that code will not work the same in all browsers.
On the PHP, try looking into file_put_contents() for writing data. Much quicker to type!

Have you checked what is actually being sent over HTTP? $imageEncoded probably starts with data:image/png;base64,xxxxx
Strip everything up to the comma after base64:
https://stackoverflow.com/a/15153931/3766670

Writiing to a SERVER file using JS

Tried all solutions.. none of them seem to work for me.
Basically, I have this website UPLOADED on the server that has a button which when clicked does a simple task of loading a file from the server, displaying it and adding +1 to it and then saving it back.
The main question now arises, I tried all the ways which I could find on the net to save the file back but it doesn't seem to work for me. Any specific advice on how can I fix this issue using JS?
UPDATE - One way I am using is - (Doesn't work tho)
fso = new ActiveXObject("Scripting.FileSystemObject");
var s = fso.CreateTextFile("TOTAL.TXT", true);
var text = test1;
s.WriteLine(text);
s.Close();
Where test1 is the name of the variable which i am trying to write.

assuming that you have php on server try this js
var data = new FormData();
data.append("data" , 1);
var xhr = (window.XMLHttpRequest) ? new XMLHttpRequest() : new activeXObject("Microsoft.XMLHTTP");
xhr.open( 'post', '/path/to/php', true );
xhr.send(data);
php script
<?php
if(!empty($_POST['data'])){
$data = $_POST['data'];
$fname = "filname.txt"
$file = fopen("upload_or_whatever_path/" .$fname, 'w') or die("Unable to open file!");// open file
fwrite($file, $data);
fclose($file);
}
?>

The code you've shared belongs to the Windows Scripting Host platform. That's an automation solution for Microsoft Windows that's by no means intended for public web sites.
File upload implementation requires a proper server-side programming language (PHP, JSP, Node...). Client side code can be as simple as a static HTML form.

Blank $_POST var in PHP using AJAX

All I'm trying to do is send a string, in html, to a script written in PHP. I've tried several solutions, including making an html element and putting it in a form and then passing the form (didn't work). I don't know the basics of AJAX or PHP, everything is just kind of being pieced together via what I can google. Here's one way I trying to remedy the situation: (The regexp replaces the first line of the file, which I works. I tried foreach loops with assigning a variable to $_POST[$key], I tried sending just the string with html hoping that would work. I believe the problem lies in the HTML, or in the AJAX call, because I can make the form submit() to the .php file and then it works, however, that would change the browser location to that file and obviously with AJAX, that's not what I want. Anyone have any ideas (other than JQuery syntax)?
HTML
<form>
<input type="hidden" name="test" id="test" value="testString">
</form>
JavaScript AJAX call
function sendString()
{
var data = document.getElementById("test");
var xhr = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
xhr.open('POST', 'testing.php', true);
xhr.send(data);
}
PHP File
<?php
$line = $_POST['data'];
$file = 'test.txt';
file_put_contents($file,preg_replace('/^.+/',$line,file_get_contents($file),1));
?>
EDIT: Thanks for the responses, but non have worked. I tried:
document.getElementById("test");
document.getElementById("test").value;
and
xhr.send(data.value);
None of these worked. Still Blank lines. I also tried the extended solution.

Your problem is here:
var data = document.getElementById("test");
You're creating a reference to your html element. You need to reference the value property of your element.
var data = document.getElementById("test").value;
Also, you are only sending the value and not a key value pair to the server. So xhr.send(data); will only send the value. Your PHP script won't know that $_POST['data'] is what you mean. You need to format var data as
var data = "data=" + document.getElementById("test").value;
EDIT
To send form data via POST, you may need to add some header information.
xhr.open('POST', 'testing.php', true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(data);

http://www.openjs.com/articles/ajax_xmlhttp_using_post.php
// change your function
function sendString()
{
var data = "data="+document.getElementById("test").value;
var xhr= new XMLHttpRequest();
xhr.open('POST', 'testing.php', true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(data);
}
In testing.php you can call them via $_POST:
echo $_POST['data'];
Example here: http://www.openjs.com/scripts/examples/ajax_using_post.php