Question

I have a cancel button where the user can cancel on a file upload and it will display a cancel message. Now what I want also to happen is that when the user clicks on the Cancel button, it will look up for the file name which has been cancelled in the database and delete the database row. Problem is that it is not deleting the database row at all. How can I get this to happen. At the moment I am using the jpuery.ajax method which you can see in code below.

Below is form code:

var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='return imageClickHandler(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'><label>" + 

 "<input type='button' name='imageCancel' class='imageCancel' cancel_image_file_name='" + imagefilename + "' value='Cancel' /></label></form>"); 

Below is the cancel button function:

    $('.imagef1_cancel').eq(window.lastUploadImageIndex).find(".imageCancel").on("click", function(event) {

        var cancel_image_file_name = $(this).attr('cancel_image_file_name');

    jQuery.ajax("cancelimage.php?imagefilename=" + cancel_image_file_name)

    return stopImageUpload(2, cancel_image_file_name);

});

Finally below is the cancelimage.php script where the jquery.ajax navigates to, to supposedly be able to delete the the database row containing the file name:

 <?php

...

    //I have connected to database

    $cancel_image_file_name = $_GET["imagefilename"];

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

        mysql_query($imagecancelsql);

        mysql_close();


    ?>

UPDATE:

Below is what it currently shows when I echo the delete query:

Notice: Undefined index: imagefilename in /web/stud/xxx/…/cancelimage.php on line 19
DELETE FROM Image WHERE ImageFile = ‘ImageFiles/’

Below is the code of the delete function where when the Delete Button is pressed, it will navigate to the deleteimage.php script and delete the database row:

function stopImageUpload(success, imagefilename){

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

$('.listImage').eq(window.lastUploadImageIndex).find(".deletefileimage").on("click", function(event) {
    var image_file_name = $(this).attr('image_file_name');

    jQuery.ajax("deleteimage.php?imagefilename=" + image_file_name)

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

      return true;   
}

Below is deleteimage.php script:

<?php

//connected to DB

  $image_file_name = $_GET["imagefilename"];

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

    mysql_query($imagedeletesql);

    mysql_close();


?>

Below is an UPDATE of what the cancel button function now looks like:

function startImageUpload(imageuploadform, imagefilename){
            $('.imagef1_cancel').eq(window.lastUploadImageIndex).find(".imageCancel").on("click", function(event) {

var cancel_image_file_name_ = $(this).attr('css');
var cancel_image_file_name = '';
var style_array = cancel_image_file_name_.split(" ");
for(i=0;i<style_array.length;i++){
    if(style_array[i].substr(0,2) == "__"){
     cancel_image_file_name = style_array[i].slice(2,style_array[i].length-2);
}

}

    jQuery.ajax("cancelimage.php?imagefilename=" + cancel_image_file_name)

    return stopImageUpload(2, cancel_image_file_name);

});       
      return true;
}

I changed the button input tag to this for cancel button:

<input type='button' name='imageCancel' class='imageCancel __"+ imagefilename + "' value='Cancel' />

Answer 1

Try these changes:

on form:

<input type='button' name='imageCancel' class='imageCancel __"+ imagefilename + "' value='Cancel' /></label></form>

on cancel button function:

var cancel_image_file_name_ = $(this).attr('class');
var cancel_image_file_name = '';
var style_array = cancel_image_file_name_.split(" ");
for(i=0;i<style_array.length;i++){
    if(style_array[i].substr(0,2) == "__"){
     cancel_image_file_name = style_array[i].slice(2,style_array[i].length);
}

}