Delete Image Files From Server

Question

I wonder whether someone may be able to help me please.

I've put together this page which allows users to view their uploaded images in a gallery format.

I'm now wanting to add the delete functionality to each image. I've created the button and the Javascript behind it, but I'm really not sure how to link the 'button click' with the actual physical deletion of the file.

The images aren't stored in a database but are in two folder locations on my server, in the following structure:

UploadedFiles/username/locationid/imagename and

UploadedFiles/username/locationid/Thumbnails/imagename

I'm relatively new to PHP and I'm now reaching the limits of my knowledge, but certainly willing to learn. From the documentation I've read I think I'm correct in saying that the unlink method is the correct command to use?

But what I'm finding really difficult is telling the code to find the folders with the username and locationid folders which match the current username and locationid and then delete the files which match the $source name variable.

I just wondered whether someone could perhaps provide some guidance please on how I may go about this.

Many thanks and kind regards

Answer 1

If you can pass the username, locationid, and imagename variables to your script, you can delete the files using unlink():

$path = 'UploadedFiles/' . $username . '/' . $locationid . '/';

unlink( $path . $imagename );
unlink( $path . 'Thumbnails/' . $imagename );

Because you are interacting with your file system, you'll want to be sure and sanitize the variables (prevent someone from using ../../../ to get to unwanted parts of your file system).

$username = str_replace( array( '..', '/', '\\', ':' ), '', $username );
$imagename = str_replace( array( '..', '/', '\\', ':' ), '', $imagename );
$locationid= str_replace( array( '..', '/', '\\', ':' ), '', $locationid );

Answer 2

Obviously your javascript (client-side) will have to call a URL (server-side) to delete the picture that the user selected. I propose that for now you do it statically (if later you wanna move to something more dynamic, the step to transform into ajax in rather small.

So as Set Sail Media said, you will have to pass the username and locationID to your server when clicking on the delete button. One way to do that is:

When rendering your gallery in HTML/javascript, for each picture, you had below it a which will contain the needed information and the submit button will simply call the delete script from your server. An example of form that you could do is:

    <form name="deleteImageX" method="GET" target="your.server.org/deleteImage.php">
        <input type="hidden" name="userName" value="theUserNameAssociatedWithThePicture" />
        <input type="hidden" name="locationId" value="locationOfThePicture" />
        <input type="submit" value="delete"/>
    </form>

This form will store the needed value in hidden fields which will not be displayed on the webpage but will still be sent to the server when pressing the submit button.

(for the little story, the method used here is GET because AFAIK HTML doesn't support the DELETE method (which would have been suitable in our case)).

The GET method will call the script "your.server.org/deleteImage.php". In this script you will have all the information you need (username/locationId) to delete the image by using the $_GET['username'] and $_GET['locationId'] variables. Then as you mentioned, you will need to use the unlink method to actually delete the file from the server.

Finally once this is done you need to redirect the php script so that after deleting the image you display the gallery again (for instance). This can be done by calling a script if you have some sort of template engine, or by calling the "header" function of php.

I hope this flow was what you expected and I hope I have been helpful.

regards,

Bear