Question

UPDATE:

Right this is what I want for the solution. When the user clicks on the “Cancel” button, it would try to find the file name of the file that is going to be cancelled and then delete the database row containing that file name.

The problem is that it is not recognizing the file name as it is stating that imagecancelname=undefined. As this is undefined, it can’t delete the database row containing the file name as it doesn’t recognise the name of the file.

So the question is that how can I get imagecancelname to recognise the name of the file which is going to be cancelled so then it can be used to be able to delete the database row containing the file name?

Below is the current form code:

var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='return startImageUpload(this);' class='imageuploadform' >" + 
  "Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/><br/><label class='imagelbl'>" + 
  "<input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /></label>" +     
  "</p><p class='imagef1_cancel' align='center'></p>" +
  "<iframe class='upload_target' name='upload_target' src='#' style='width:0;height:0;border:0px;solid;#fff;'></iframe></form>");

Below is the startImageUpload function where it displays the cancel button when file is uploading and where it contains the cancel button function if the user clicks on the Cancel button:

function startImageUpload(imagecancelname){

        $('.imagef1_cancel').eq(window.lastUploadImageIndex).html('<div><button type="button" class="imageCancel" image_cancel="' + imagecancelname + '">Cancel</button></div>'); 

            $('.imagef1_cancel').eq(window.lastUploadImageIndex).find(".imageCancel").on("click", function(event) {
                var image_cancel = $(this).attr('image_cancel');

              var url = 'cancelimage.php';
window.location=url+"?imagecancelname=" + image_cancel;

});       
      return true;
}

Finally below is the cancelimage.php script where when the user clicks on the Cancel button, it will navigate to this script and this is where the script is used to delete the database row by finding the file name using the $GET method.

    <?php

    ... connected to DB

    $image_cancel = $_GET["imagecancelname"];

            $imagecancelsql = "DELETE FROM Image 
            WHERE ImageFile = 'ImageFiles/". mysql_real_escape_string($image_cancel)."'";

        mysql_query($imagecancelsql);

        mysql_close();


?>

Answer 1

In javascript you could just add an additional php file to delete a row from database.

Add this in your js (when you delete):

window.location=url+"?"+id;

url = path where the php file is located

id = the row id which you would like to delete

Then add a php file to do the database operation

<?php
    $imagecancelsql = "DELETE FROM Image 
               WHERE ImageFile = 'ImageFiles/".
               mysql_real_escape_string($_FILES['fileImage']['name'])."'";
    mysql_query($imagecancelsql);

Id is a parameter which you need to pass as parameter from javascript.
For example:
If you would like to delete an image which has got an name black, then pass
In Javascript:

var image = 'black';
window.location=url+"?id="+image;

Later in the php file get the value of id using:

$image = $_GET['id'];

Then execute your query:

$imagecancelsql = "DELETE FROM IMAGE WHERE IMAGEFILE = $image";