PDA

View Full Version : PHP Photo Album script v2.11



gogtabi
07-15-2010, 11:20 PM
1) Script Title: PHP Photo Album script v2.11

2) Script URL (on DD): http://dynamicdrive.com/dynamicindex4/php-photoalbum.htm

3) Describe problem: i was wondering if i could have it so the "onphotoclick" function could be used to delete the image from my server..

I've tried "...onphotoclick:function(thumbref, thumbindex, thumbfilename){
unlink(thumbref.src);}..."

Obviously that is incorrect

jscheuer1
07-16-2010, 12:54 AM
Other than the fact that you could soon end up with no images (even no files, see warning below) on the server, we can do that. You would need to make an AJAX, synchronous request, form submission, or open a page in an iframe (could be a hidden iframe) that passes the filename to a simple (I'm assuming that's PHP from the use of the unlink() function) server side script that would accomplish your aim.

Note: The below code has all been fully tested and works. But the images will still be cached, so will not disappear form the page until it's refreshed. We may be able to work out a way to also remove the image from the page without the need to refresh. Also be aware of the danger involved in creating a page that can delete files form the server. I've tried to eliminate this, but more testing would be wise.

AJAX is probably the best choice. Put this script in the head of your page, or its code (minus the opening and closing script tags) in an external script linked to the head of your page:


<script type="text/javascript">
function loadXmlHttp(url, id) {
var f = this;
if (loadXmlHttp.xmlHttp){
f.xmlHttp = loadXmlHttp.xmlHttp();
f.el = document.getElementById(id);
f.xmlHttp.open("GET", url, true);
f.xmlHttp.onreadystatechange = function(){f.stateChanged();};
f.xmlHttp.send(null);
}
else alert('Your browser does not support AJAX!'); // substitute your desired request object unsupported code here
}

loadXmlHttp.xmlHttp = null; loadXmlHttp.re = /^http/.test(window.location.href);
/*@cc_on @*/ // used here and below, limits try/catch to those IE browsers that both benefit from and support it
/*@if(@_jscript_version >= 5) // prevents errors in old browsers that barf on try/catch & problems in IE if Active X disabled
try {loadXmlHttp.ie = window.ActiveXObject}catch(e){};
@end @*/
if (window.XMLHttpRequest && (!loadXmlHttp.ie || loadXmlHttp.re))
loadXmlHttp.xmlHttp = function(){return new XMLHttpRequest();}; // Firefox, Opera 8.0+, Safari, others, IE 7+ when live - this is the standard method
else if (/(object)|(function)/.test(typeof createRequest))
loadXmlHttp.xmlHttp = createRequest; // ICEBrowser, perhaps others
else {
loadXmlHttp.xmlHttp = null;
// Internet Explorer 5 to 6, includes IE 7+ when local //
/*@if(@_jscript_version >= 5)
try{loadXmlHttp.xmlHttp = function(){return new ActiveXObject("Msxml2.XMLHTTP");};}
catch(e){try{loadXmlHttp.xmlHttp = function(){return new ActiveXObject("Microsoft.XMLHTTP");};}catch(e){}}
@end @*/
}

loadXmlHttp.prototype.stateChanged = function(){
if (this.xmlHttp.readyState == 4 && (this.xmlHttp.status == 200 || !loadXmlHttp.re)){
// If you want something to report the success of fetching the page, put it here.
// It will not be able to tell you if the file was deleted successfully though,
// unless you put code in your php page to help it do that, like:
alert(this.xmlHttp.responseText); // comment out or change this line as desired
}
}
</script>

unlink.php:


<?php
$file = isset($_GET['del'])? $_GET['del'] : false;
if($file and file_exists($file)){
$file = basename($file, '.php'); // should limit deletion to the folder this page is in and skip the getalbumpics.php & this file - test!
}
$success = false;
if($file and file_exists($file)){
@$success = unlink($file);
}
if($success){
echo $file . ' successfully deleted.';
} else {
echo 'There was a problem deleting ' . $file;
}
?>

Put that in the same folder as your images. Then use:


onphotoclick:function(thumbref, thumbindex, thumbfilename){
new loadXmlHttp('path_to_image_folder/unlink.php?del=' + thumbfilename);
}

Replace the highlighted with the actual path to the images folder.

Warning: Without adequate protections, unlink.php may be used to delete virtually any file on the server.

gogtabi
07-16-2010, 01:15 AM
Thank you very much. this page will be properly protected for moderators only to upload and remove pictures from the server..

i properly directed
"onphotoclick:function(thumbref, thumbindex, thumbfilename){
new loadXmlHttp('images/unlink.php?del=' + thumbfilename);"
but for some reason the "thumbfilename" is not getting through to the unlink.php. I keep getting the same 'There was a problem deleting' error but without the image name after it.

jscheuer1
07-16-2010, 02:39 AM
First of all, make sure you are using the latest version of unlink.php. I updated it several times. Mostly this was for security, but one of the updates was for functionality (I had forgotten to capitalize $_GET). Refresh the page and go back to my previous post to make sure you have all of the current files. Here's the latest unlink.php:


<?php
$file = isset($_GET['del'])? $_GET['del'] : false;
if($file and file_exists($file)){
$file = basename($file, '.php'); // should limit deletion to the folder this page is in and skip the getalbumpics.php & this file - test!
}
$success = false;
if($file and file_exists($file)){
@$success = unlink($file);
}
if($success){
echo $file . ' successfully deleted.';
} else {
echo 'There was a problem deleting ' . $file;
}
?>

Make sure to clear your cache after the change. If there still is a problem, I have some tests you can perform.

I also worked out a way to substitute an image of your choice that would show that the file was deleted without having to refresh the page. Let me know if you are interested in that.

gogtabi
07-16-2010, 03:47 AM
okay it was because of the "$_Get". So it works now.. thank you very much..

Yes i would be interested in the substitution picture

jscheuer1
07-16-2010, 04:35 AM
OK, make an image, or use mine:

http://home.comcast.net/~jscheuer1/side/deleted.gif

save it as deleted.gif or whatever. If you use a different filename, make sure to change it in the code. Put it in the same folder as the page with the Photo Album script on it. Do not put it in the images folder.

Next, use this updated version of the loadXmlHttp.prototype.stateChanged function:


loadXmlHttp.prototype.stateChanged = function(){
if (this.xmlHttp.readyState == 4 && (this.xmlHttp.status == 200 || !loadXmlHttp.re)){
// If you want something to report the success of fetching the page, put it here.
// It will not be able to tell you if the file was deleted successfully though,
// unless you put code in your php page to help it do that, like:
alert(this.xmlHttp.responseText); // comment out or change these lines as desired
if(/success/.test(this.xmlHttp.responseText)){
this.success();
}
}
}

This depends upon the unlink.php still echoing the word successfully if there is success. You can probably comment out or remove the line with the alert if you want. It might be needed to allow the rest of the code time to catch up though. If so, we can try creating a timeout so that the alert won't be required. But keeping the alert is also an option, and could be considered nice for informational purposes.

Next, use this updated version of the onphotoclick function:


onphotoclick:function(thumbref, thumbindex, thumbfilename){
var ims = this.albumvar.images, del = new loadXmlHttp('pics/unlink.php?del=' + thumbfilename);
del.success = function(){
thumbref.src = 'deleted.gif';
for (var i = ims.length - 1; i > -1; --i){
if(ims[i][0] == thumbindex){
ims[i][1] = '../deleted.gif';
}
}
};
}

Notice the highlighted filename (two places) for deleted.gif. Change this if using a different filename. Also notice the ../ for the second instance. This assumes that the folder with the images in it is a direct child of the folder with the page in it:


folder with page
------------------------ images folder

If it is not, figure out the relative path from the images folder to the folder with the page, and use that instead of the ../ part.

That's it.

What it will do is substitute the deleted.gif image for the thumbnail image on the page, and make a reference to the deleted image in the images array so that changing the virtual pages of the gallery and then coming back will still feature the deleted image in place of the image that was deleted. Without this last bit, you might still see the deleted image when changing virtual pages and coming back.

Once the page is refreshed though, the script will only fetch the images remaining in the images folder, so the deleted image(s) will be gone with no placeholder.

gogtabi
07-16-2010, 05:34 AM
The script works flawlessly.. Thank you very much..

I do not mind the alert telling me it was a successful delete so i will leave it in..