PHP Unlink To delete Images

[hobbiton73]

I wonder whether someone may be able to help please.

 

I've put together the following page http://www.mapmyfinds.co.uk/development/deletetest.php which allows users to view a gallery of their uploaded images.

 

I'm now starting to work on the `deletion` functionality and I've attached a suitable icon and the Javascript code so the user can select the image to delete. From the research I've done, I know that to delete the files from my server I need to use the PHP `unlink` command. The problem I'm having is I'm not sure how to tie up the 'deletion' selection made by the user and the physical deletion of the files.

 

I've added my `unlink` code below which uses the relative path and then for the thumbnails, Ive added the echo source filename, so the image in the Thumbnails folder matches the one of the same name in the gallery being deleted, but as I said, it's at this point that I'm not sure what to do next.

 

<?php 

unlink($path);
unlink($path . 'Thumbnails/' . "<?php echo $source; ?>");
?>

 

I just wondered whether someone could perhaps have a look at this please and possibly provide some guidance on how I can link up the Javascript `click` event and the deletion of the files.

 

Many thanks and kind regards

[scootstah]

If you want to use Javascript, you'll need to use AJAX. You're going to need to call a PHP script which will delete the specified file. It could be as simple as:

 

delete.php (this is the script that will be called with AJAX to delete the file)

<?php

if (!empty($_POST)) {
$image = $_POST['image'];

if (file_exists($image)) {
	unlink($image);
}		
}

 

the AJAX script (using jQuery)

$(function(){
$('btn-delete').click(function(){
	// get the image
	var image = $(this).parent().find('img').attr('src');

	// send the AJAX request
	$.ajax({
		url     : 'delete.php',
		type    : 'post',
		data    : { image : image },
		success : function(){
			alert(image + ' was deleted!');
		}
	});
});
});

 

Untested, but it should work.

 

 

Also, bare in mind that this is a very basic example, and does not take security or validation into consideration. In a real-world script you will want at the very least CSRF protection.

 

EDIT: You could also send back a response from the PHP script so that the AJAX function can determine whether or not an image was actually deleted. In my example, the AJAX function just assumes an image was deleted.

[hobbiton73]

Hi, many thanks for this, I've tested the code, and although I don't receive any error message, the images are not deleted.

 

May I just confirm one point though that may be the cause of this. My existing code for the Javscript behind the delete button is as follows:

 

	Galleria.ready(function() {
    this.$('thumblink').click();

$(".galleria-image").append( 
"<span class='btn-delete ui-icon ui-icon-trash'></span>"); 
$(".btn-delete").live("click", function() 
{ var img = $(this).closest(".galleria-image").find("img"); 
alert('Deleting image... ');
$(this).closest(".galleria-image"). fadeOut('slow');
return false;
        });

    });

 

Could you confirm for me please whether your code replaces this and if at all possible could I possibly amalgamate the two?

 

Mnay thanks and kind regards

[scootstah]

Your code should work, but you need to place the AJAX portion in there.

[hobbiton73]

Many thanks for this. I'll give it a try and get back to you to let you know how I've got on.

 

Kind regards

[hobbiton73]

Hi, following on from yesterday, I've used the code that you kindly provided by itself and unfortunately I've run into a few issues with it.

 

Although I don't receive any error message, the code seem to interferes with my image software, removing the 'deletion' icon from each image, and causing the 'Thumbnail' default view not to open on page load.

 

Could you tell me please have you an ideas where I'm going wrong.

 

Many thanks and kind regards

[scootstah]

Nothing in my script should do any of that.

[hobbiton73]

Hi, as I said it could very well be me that's done something wrong.

 

But please find below two links. The first is with my existing code, and the second is with your code replacing mine. I hope this can illustrate the problem a lot better than I can perhaps explain.

 

http://www.mapmyfinds.co.uk/development/gallery.php My existing code

 

http://www.mapmyfinds.co.uk/development/deletetest.php Your proposed code

 

Sincere thanks for your continued help with this, it is greatly appreciated.

 

Kind regards

[scootstah]

Okay, the problem is that you removed all of your Javascript and replaced it with mine. Your gallery appears to be fueled by Javascript so therefore it requires your code to function. Instead, you need to add the AJAX portion of my code to yours.

 

This might work:

Galleria.ready(function() {
    this.$('thumblink').click();

$(".galleria-image").append( 
"<span class='btn-delete ui-icon ui-icon-trash'></span>"); 
$(".btn-delete").live("click", function(){
	var img = $(this).closest(".galleria-image").find("img"); 

	// send the AJAX request
	$.ajax({
		url     : 'delete.php',
		type    : 'post',
		data    : { image : image.attr('src') },
		success : function(){
			alert('Deleting image... ');
			$(this).closest(".galleria-image"). fadeOut('slow');
		}
	});

	return false;
    });

});

[hobbiton73]

Hi, many thanks for this,  it certainly sorts out the issue of the 'thumbnails', they're now working fine.

 

Unfortunately, although I receive the correct message to say the image is being deleted, it isn't.

 

I did have to make some minor adjustments to your code, because in the 'AJAX' piece of the script it was shown as 'image' and I received a 'image is undefined' error message. so I've now changed this to 'img' and I no longer receive this error.

 

I'm very sorry be a complete pain with this and I thank you for sticking with it.

 

Kind regards

[scootstah]

I did have to make some minor adjustments to your code, because in the 'AJAX' piece of the script it was shown as 'image' and I received a 'image is undefined' error message. so I've now changed this to 'img' and I no longer receive this error.

 

Whoops, sorry about that. Make sure you only change it on the right side and not the left... IE: data    : { image : img.attr('src') }, because otherwise you will need to change it in the PHP script as well.

 

Speaking of which, are you using the PHP script I provided?

[hobbiton73]

Please you don't have to apologise, it's absolutely fine. This is great!

 

We're certainly getting somewhere. Again, it might be best to give you a link rather than try and explain it.

 

http://www.mapmyfinds.co.uk/development/deletetest.php

 

If you open the above link, go to 'View Source' please and scroll down to row 80.  You'll see that there is a 'a href' with the image name and a 'src' with the image name. The 'src' image is being deleted whereas the 'a href' is not.

 

Looking at your code, I think I'm right in saying this is where the 'data' line comes into play. Is it possible to add more than two 'data' lines to include the 'a href' copy? Forgive me for asking, I'm very new to this but very keen to learn.

 

Also the 'fade out' of the image on screen isn't working. I've gone back to the code and compared it to my original, and I can't see any difference, so I'm not sure where the problem lies.

 

Now it's my turn to apologise. I forgot that the image detail is also stored in an XML file called 'files.xml' which I'll also have to delete at the same time. However, I'll take a look at this separately. I just wanted to let you know because I noticed from my testing, if the physical image has been deleted, because it's still in the XML file, an error message appears on screen saying that the image can't be found. I didn't want you to think it was a problem with your code that's all.

 

I can't thank you enough for all the help you're giving me. You've no idea how long I've been stuck on this.

 

Kind regards

[scootstah]

I *think* if you change the fadeOut part to this it should work:

img.parent().fadeOut('slow');

 

 

[hobbiton73]

Hi, that's great, thank you so much.

 

The image now fades upon deletion 

 

Kind regards

[hobbiton73]

@Scootstah, I just wanted to drop you a line to say that I've sorted out the issue with the deletion of the second image.

 

But, more importantly,  I just wanted to take this time to say thank you so very much for all your time, trouble and effort. As I said yesterday, this part of my project has been holding me back for months, so to now be in a position where the deletion of the image works is great.

 

Once again, sincere thanks, kind regards and all the very best for the future.