Delete specific uploaded file from folder on server and display remaining files

Question

going a bit crazy trying to get this to work... I have a photo upload page that lets you upload multiple photos and displays all the uploaded photos of a specific user below the upload form. I also place a delete button next to each photo however once you delete a photo it keeps displaying that image (although with a broken link as the photo is deleted from the server). I start by looping through a table that holds the file dir and name and then displays those photos. I have a submit button that calls the unlink() function.

$photoQuery= "SELECT * FROM photo_index WHERE User_ID='$UserID'";
            $result = mysqli_query($dbcon, $photoQuery);

            while ($photo_data = mysqli_fetch_array($result)){


                echo "<form id=photo_Form action=listing_photos.php method=post> ";
                echo "<input type=hidden name=photoDir value='$photo_data[Photo_Dir]' />";
                echo "<input type=submit name=photoDel id=submit_but value=Delete />";
                echo "</form>";
                echo "<img src='$photo_data[Photo_Dir]' height=100px width=100px>";


    }

Then here is the php that deletes the photo file and the row in the table that stored the photo info.

if (isset($_POST['photoDel'])){
                $fh = fopen($_POST['photoDir'], 'a');
                fclose($fh);
                unlink($_POST['photoDir']);

                $photoDel= "DELETE FROM photo_index WHERE Photo_Dir='$_POST[photoDir]'";
                $result = mysqli_query($dbcon, $photoDel) or die(mysql_error());

                echo "Photo Removed";

}

I had to open and close the file before using unlink because if I didnt I would always get a warning after the photo was deleted saying that unlink(images/somephoto.jpg) did not exist (because it had been removed from the server already)

Once the delete button is clicked it should refresh the page shouldn't it?? and when the page refreshes it should reload the query and only display the photos that are listed in the photo tabel?? For what ever reason it takes two refreshes to get that result. Any help would be very much appreciated, or any way to just do this better! Cheers.

Answer 1

First off, your code is vulnerable to SQL injection. You should look into that. Next, maybe you should use JS to find and remove the image from the document. So, have a <button> that runs a function which removes the image with that specific source from the document.

Here's a PHP snippet:

$photoQuery= "SELECT * FROM photo_index WHERE User_ID='$UserID'";
            $result = mysqli_query($dbcon, $photoQuery);

            while ($photo_data = mysqli_fetch_array($result)){


                echo "<form id=photo_Form action=listing_photos.php method=post> ";
                echo "<input type=hidden name=photoDir value=". $photo_data[Photo_Dir] . "/>";
                echo "<input type=submit name=photoDel id=submit_but value=Delete />";
                echo "</form>";
                echo "<img src=" .$photo_data[Photo_Dir]. "  id = 'picture' height=100px width=100px>";
                echo "<script> 
                         var d = getElementById('submit_but'); 
                         var b = getElementById('pic');
                         d.onclick = function(){
                              pic.parentNode.removeChild(b);
                              return true;
                         }
                      </script>";

    }

See here for the JavaScript:

http://jsfiddle.net/BUXBq/