Question

I have a javascript function below where it removes an appended file name from .listImage when the user clicks on the “Delete” button:

function stopImageUpload(success, imagefilename){

      var result = '';

      if (success == 1){
         result = '<span class="msg">The file was uploaded successfully!</span><br/><br/>';      
         $('.listImage').eq(window.lastUploadImageIndex).append('<div>' + htmlEncode(imagefilename) + '<button type="button" class="deletefileimage">Delete</button><br/><hr/></div>'); 
      }
      else {
         result = '<span class="emsg">There was an error during file upload!</span><br/><br/>';
      }


      $(".deletefileimage").on("click", function(event) {

        $(this).parent().remove();

    });

      return true;   
}

As you can see the $(".deletefileimage").on("click", function(event) { is used to delete the correct appended file name.

But what I want to do is that when the user deletes a file name, it also deletes the file from the server. So I am trying to use this code: unlink($_FILES["fileImage"]["temp_name"]); to delete the file from the server.

But what I want to know is that where do I store this code so that it uses the javascript function to delete the appended file name but then be able to go onto the php script to delete the file from the server?

BELOW IS the php script (imageupload.php) where the uploading of files occur:

<?php

session_start();

$result = 0;

if( file_exists("ImageFiles/".$_FILES['fileImage']['name'])) {
    $parts = explode(".",$_FILES['fileImage']['name']);
    $ext = array_pop($parts);
    $base = implode(".",$parts);
    $n = 2;

    while( file_exists("ImageFiles2/".$base."_".$n.".".$ext)) $n++;
    $_FILES['fileImage']['name'] = $base."_".$n.".".$ext;

    move_uploaded_file($_FILES["fileImage"]["tmp_name"],
    "ImageFiles2/" . $_FILES["fileImage"]["name"]);
    $result = 1;

}
    else
      {
      move_uploaded_file($_FILES["fileImage"]["tmp_name"],
      "ImageFiles2/" . $_FILES["fileImage"]["name"]);
      $result = 1;

      }

?>

  <script language="javascript" type="text/javascript">window.top.stopImageUpload(<?php echo $result ? 'true' : 'false'; ?>, '<?php echo $_FILES['fileImage']['name'] ?>');</script>

Answer 1

You will need to use an ajax call to your php script to allow deletion of files on the server. JQuery’s ajax documentation can be found here.

First, you will need to connect your button and image file name like so

$('.listImage').eq(window.lastUploadImageIndex).append('<div>' + htmlEncode(imagefilename) + '<button type="button" class="deletefileimage" image_file_name="' + imagefilename + '">Delete</button><br/><hr/></div>');

Now, your delete method will then look something like this.

$(".deletefileimage").on("click", function(event) {
    // Find the image file name that is associated with this delete button. You 
    // may want to think about linking the image file name and the delete button
    // in a better way than this.
    var image_file_name = $(this).attr('image_file_name');
    $(this).parent().remove();
    console.log("Deleting " + image_file_name);
    jQuery.ajax("delete.php?imagefilename=" + image_file_name)
      .done(function(data) {
        $(".msg").append(data);
       });
});

Finally, the delete.php will need to look something like this

<?php
  $image_file_name = "ImageFiles/" . $_GET["imagefilename"];
  if (User Uploaded this File || Has Permission to Delete it)
  {
    print "Deleting $image_file_name";
    // This assumes delete.php is in the same directory as the image file.
    unlink($image_file_name);
  }
?>

Here is a JSFiddle to show you working code.