How to delete uploaded image using jQuery / Ajax / PHP?

Question

I am using following script to upload images. Here is the link : http://filer.grandesign.md/

Using this script It's allowing the preview after upload the image. Like bellow image :

You can see that, it's also allowing to delete the Image - See red bucket icon

What I am doing now :

When I upload the image I renamed the uploaded image and save it to database.

The code is bellow :

require_once('class.upload.php');
if(!isset($_FILES['files'])) {
    die();
}

$files = array();
foreach ($_FILES['files'] as $k => $l) {
   foreach ($l as $i => $v) {
       if (!array_key_exists($i, $files))
           $files[$i] = array();
       $files[$i][$k] = $v;
   }
}

foreach ($files as $file) {

    $handle = new upload($file);

    if ($handle->uploaded) {

        $handle->file_new_name_body     = 'mpic_list_'.uniqid('', true);
        $menu_list_image = $handle->file_new_name_body;

        $handle->image_resize          = true;
        $handle->image_ratio_crop      = true;
        $handle->image_x               = 360;
        $handle->image_y               = 240;   

        $handle->process('images/menu_images/');    

        $handle->file_new_name_body     = 'mpic_small_'.uniqid('', true);
        $menu_small_image = $handle->file_new_name_body;

        $handle->image_resize          = true;
        $handle->image_ratio_crop      = true;  
        $handle->image_x               = 100;
        $handle->image_y               = 65;

        $handle->process('images/menu_images/');

        $handle->file_new_name_body     = 'mpic_large_'.uniqid('', true);
        $menu_large_image = $handle->file_new_name_body;

        $handle->image_resize          = true;
        $handle->image_ratio_crop      = true;  
        $handle->image_x               = 700;
        $handle->image_y               = 470;

        $handle->process('images/menu_images/');

        if ($handle->processed) {           
            $all_images = $menu_list_image . $menu_small_image . $menu_large_image;
            $u_id = (int) $_SESSION['logged_user_id'];

            if(!isset($_SESSION['last_id'])) {
                // insert upload image section data...
                $insert_menu_details = mysqli_query($conn, "INSERT INTO products (p_id) VALUES ('')");
                $last_id = mysqli_insert_id($conn);
                $insert_upload_image = mysqli_query($conn, "INSERT INTO product_images VALUES ('', '$menu_large_image', '$menu_list_image', '$menu_small_image', '$last_id', '$u_id')");    
                $_SESSION['last_id'] = $last_id;
            } else {
                // update upload image section data
                $session_last_id = $_SESSION['last_id'];
                $update_upload_image = mysqli_query($conn, "INSERT INTO product_images VALUES ('', '$menu_large_image', '$menu_list_image', '$menu_small_image', '$session_last_id', '$u_id')");    
            }

            $handle->clean();
        } else {
            //echo 'error : ' . $handle->error;
            echo 'Error';
        }
    }   
}

What I need :

Now I want to delete my uploaded image. But here is an issue which is : by default this script is deleting the uploaded image using following PHP line :

<?php 
if(isset($_POST['file'])){
    $file = 'images/menu_images/' . $_POST['file'];
    if(file_exists($file)){
        unlink($file);
    }
}
?>

But I can't delete it because when I upload the image to folder ( images/menu_images/ ) I renamed it to something like that : abedkd12415775554.jpg

My Question is How can I delete my uploaded image using this script ?

Answer 1

You need to return the new images name that you are generating from server scripting like-

In the loop you are executing for inserting filename in database-

$array = array("oldName" => "newName");
echo json_encode($array);

You can also use numeric index if you are using some logic at your javascript end for creating array.

In javascript on delete option you can retrieve the value by using the image name and can perform delete.

Answer 2

check this

$res=mysqli_query("SELECT file FROM tbl_uploads WHERE id=".$_GET['remove_id']);
$row=mysqli_fetch_array($res);
mysqli_query("DELETE FROM tbl_uploads WHERE id=".$_GET['remove_id']);
unlink("uploads/".$row['file']);

Replace Your table and id name