Basic moderation tool issues, echo'd button not functioning

[leefromseattle]

I have an app that uploads screenshots and I have a webpage that users can go to to view/save the images.

 

The webpage just has a form to select a month/day/hour from dropdowns on a form, then updates the page with ajax and displays images echo'd out by the php as it iterates over that month/day/hour's directory, populating an image tag with the url of the image, in an echo statement.

echo '<img src="' . 'https://mydomain.com/client/uploads/' . $_GET["month"] . '/' . $_GET["day"] . '/' . $_GET["hour"] . '/' . $fileInfo->getFilename() .'"/>';

It properly displays all the images and works for the public facing site. I then made a non public page that does the same thing and am trying to make the delete button like:

echo '<button onclick="function Delete() { console.log(5);}">Delete</button><br />'; //test
echo '<button onclick="Delete();">Delete</button><br />'; //test
echo '<img src="' . 'https://mydomain.com/client/uploads/' . $_GET["month"] . '/' . $_GET["day"] . '/' . $_GET["hour"] . '/' . $fileInfo->getFilename() .'"/>';

The delete buttons do nothing. On my html page I have in the head tags but it never gets called.

<script>
function Delete() {
console.log("Delete");
}</script>

I'm trying to just get the basic communication with the javascript function so I can then change it to POST/GET that image's path to my deleteFile.php script to delete that specific image. Doesn't even need to update the page it's just a very very very basic moderation functionality not publicly showing so someone can scroll through the images and delete them off my server. 

 

 

Any ideas why the javascript function doesn't get called? And how I can fix it? 

[ginerjm]

you can delete a file with a click to a JS function? Really? That seems rather insecure. How does the function know what file is to be deleted?

 

This is new to me.

 

Ok - correction. Took me a couple reads to understand what you are doing.

 

So - what is the problem? You can't get the js to put something into the log? Why not just do an alert call?

[leefromseattle]

you can delete a file with a click to a JS function? Really? That seems rather insecure. How does the function know what file is to be deleted?

 

This is new to me.

 

Ok - correction. Took me a couple reads to understand what you are doing.

 

So - what is the problem? You can't get the js to put something into the log? Why not just do an alert call?

 

 

So I just tried alert and it does seem to work, it's just console.log that isn't working, I don't need to log out anything I just wanted to see if the function fires when I click the button and while it doesn't seem to fire, it does seem to call the rest of the function. 

 

php script

echo '<button onclick="alert();">Alert</button>';   //Alerts an empty prompt when clicked	
echo '<button onclick="Alert();">Alert</button>';   //Calls Alert function which populates an alert message   

Alert function on html page

function Alert(){
    console.log("Clicked!");  //doesn't do anything
    alert("I am an alert box!"); //does alert this message
}

Since it wasn't logging anything in the console I was assuming it wasn't working, but after adding the alert msg it seems to fire that off. Seems weird that console.log wouldn't do anything, no? Thanks for helping me figure out the function is firing off. I'll try calling the delete command now from the function. 

[ginerjm]

"Calling the delete command" from the function? Uhhh.... YOu do realize that it is not that simple. An Ajax call is just the trigger to actually get your server to do the deletion for you via PHP.

[leefromseattle]

"Calling the delete command" from the function? Uhhh.... YOu do realize that it is not that simple. An Ajax call is just the trigger to actually get your server to do the deletion for you via PHP.

 

Private webpage simply has a form with Month, Day, Hour as options dropdowns, person selects November, 26, 8am and it calls:

https://mydomain.com/client/getFiles.php?month=November&day=26&hour=8

which goes to getFiles.php:

<?php
 header("Access-Control-Allow-Origin: *");
	foreach (new DirectoryIterator($_SERVER['DOCUMENT_ROOT'] .'/client/uploads/' . $_GET["month"] . '/' . $_GET["day"] . '/' . $_GET["hour"]) as $fileInfo) {
	if(!empty($fileInfo)){
		if($fileInfo->isDot()) continue;
		    if(!$fileInfo->isDir()){
		    	echo '<br /><br />';	    	
		    	
		    	$pth = 'https://mydomain.com/client/uploads/' . $_GET["month"] . '/' . $_GET["day"] . '/' . $_GET["hour"] . '/' . $fileInfo->getFilename();
		    	
                        echo $pth . "<br />"; 	  //Looks good, proper path of image
		    	      
		    	echo '<button onclick=\"Alert(' . $pth . ');\">Alert</button>';	   //not working gives syntax error but close to working
 
			echo '<button onclick=\"Delete();\">Delete</button><br />';
			echo '<img src="' . 'https://mydomain.com/client/uploads/' . $_GET["month"] . '/' . $_GET["day"] . '/' . $_GET["hour"] . '/' . $fileInfo->getFilename() .'"/>';			    
		    }	    
		}
	}	  
?>

That spits out a the images back to the webpage in a big list. 

 

I'm trying to rig up the delete button to populate the right path for each image and onclick, call a javascript function that will simply forward the path to my delete.php script. Like: 

https://mydomain.com/client/delete.php?path=pathToDelete

<?php
 header("Access-Control-Allow-Origin: *");
 $filePath = $_GET["path"];

 if (file_exists($filePath))
 {
     echo $filePath . " Removing. ";
     unlink($filePath);
 }                         		
?>

Right now my holdup is echo '<button onclick=\"Alert(' . $pth . ');\">Alert</button>'; is giving an error:

Uncaught SyntaxError: Invalid or unexpected token

Which I think is formatting/syntax because if I change the $pth variable to a number it does alert it in my javascript function correctly, trying to figure it out right now.

[ginerjm]

Why not just make the button an anchor tag instead which passes back the key information for each image as part of the href (a GET call). Of course that means you have to re-build the page using the original user parms. Otherwise - it is as I said - you have to do an AJAX call to your delete script.

[leefromseattle]

Interesting, sorry I'm a C# developer trying to piece this together so have no idea what the best way is, the app is an installation on a video wall with a kinect photo booth at a mall that snaps their pic with holiday props and puts it on my server. There's then a page that they can go to to see the photos from the hour they were at the mall. The client wants to be able to delete any inappropriate images. 

 

I just need a simple way for them to see an image and click something to delete it.  Would it be difficult to chain 2 urls in the href, one that sends the delete message and the second that reloads the page? I have the js variables of month/day/hour I could repass.        It doesn't have to "do" anything visually, it could still show the image they deleted until they refresh the page and enter the same parameters in.  

 

On the web form when they set the dropdown options and hit submit button it calls:

function GetPhotos(){

var xhttp;
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("txtHint").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "https://mydomain.com/client/getFiles.php?month="+ month + '&day=' + day + '&hour=' + hour, true);
  xhttp.send();   
}

I was thinking I could do the same thing copying that function, add a parameter for pathToImage, and call it with the delete button's onclick to submit the GET with the deleteFile.php?path = pathToImage  

 

What do you think would be better? 

 

Any idea what proper syntax for 

echo '<button onclick=\"MyAjaxFunction(' . $pth . ');\">Delete</button>';

would be? I echo out $pth and it looks correct but throws an error when I try to pass it as a parameter, if I get rid of the ' . $pth . ' and just put in a number it works and debugs out the parameter but it's not liking strings...

 

Thank you.

[leefromseattle]

Got it working, took me hours to figure out the right syntax for concatenating it. 

echo '<button onclick="DeletePhoto(' . "'".$pth."'" . ', '.this.');">Delete</button>';

Dunno how that even makes sense but it works. So many quotes and double quotes, my god.

 

Ajax delete works and I used jquery to hide the deleted image so they can just scroll down the list deleting whatever images they want without loading the page again.

[ginerjm]

If you re-arranged your quotes you could end up with this:

echo "<button onclick='DeletePhoto(\"$pth\", this)'>Delete</button>";