I have a web programming question which I need to deal with which is below:
“You are passing the form element to the startImageUpload() function, and attempting to store it as a string in the HTML you add to the imagef1_cancel element. This will not work. You need to give each form a unique id, and use this string to identify the upload that needs to be cancelled.”
At the moment it cannot recognize the file it wants to delete from the row when clicking on a cancel button. Below is what the var_dump($GET) and the print($imagecancelsql) is showing:
Notice: Undefined index: imagecancelname in /xxx/Mobile_app/cancelimage.php on line 22
array(0) { } DELETE FROM Image WHERE ImageFile = ‘ImageFiles/’
So how can the problem be sorted out so that it can identify the file string of the upload that needs to be cancelled?
Below is my current attempt in trying to solve this:
var sourceImageForm;
function startImageUpload(imageuploadform, imagecancelname){
$(imageuploadform).find('.imagef1_upload_process').css('visibility','visible');
$(imageuploadform).find('.imagef1_cancel').css('visibility','visible');
$(imageuploadform).find('.imagef1_upload_form').css('visibility','hidden');
sourceImageForm = imageuploadform;
/*The above would show and hide elements within the form the file is being uploaded.
For example if I have three forms and the second form is uploading a file, then it
shows and hides the elements within the second form only */
$(imageuploadform).find('.imagef1_cancel').html('<div><button type="button" class="imageCancel" id="image_cancel_' + imagecancelname + '">Cancel</button></div>').find(".imageCancel").on("click", function(event) {
$.ajax("cancelimage.php?imagecancelname=" + $(this).attr('id').slice(13));
});
return true;
}
Below is the 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>");
Finally below is the cancelimage.php where it is suppose to delete the db row containing the file name:
<?php
// ... connected to DB
$image_cancel = '';
if (isset($_GET["imagecancelname"])) { $image_cancel = $_GET["imagecancelname"]; }
$image_cancel = $_GET["imagecancelname"];
$imagecancelsql = "
DELETE FROM Image
WHERE ImageFile = 'ImageFiles/".mysql_real_escape_string($image_cancel)."'
";
print $imagecancelsql;
mysql_close();
?>
You can get rid of this notice, when checking for existence of this GET index:
Later on you should only continue, if $image_cancel is set to something useful and(!) allowed (never trust user input and do proper validation).