Delete function with check boxes for multiple files/folders

Question

I am building a dropbox like application with php and javascript. I am trying to build a delete function to delete multiple files and folders at once. The code below demonstrates each and every row. This was done in php to dynamically display all folders stored in the server:

<?php
foreach ($files as $file) {
    echo '<li class="browse-file">
            <div class="select-all-col"><input name="select" type="checkbox" class="select" id="'.$file.'"/></div>
            <div class="file-name-col"><a href="my-home.php?name='.$folderName."/".$file.'" style="cursor: pointer;">'.$file.'</a></div>
            <div class="kind-col">folder</div>
            <div class="date-modified-col">'.date ("F d Y H:i:s.", filemtime($_SESSION['currentDir']."/".$file)).'</div>
            <br />
        </li>';
                }
?>

The following is a link to delete all the checked folders:

<a href="#" id="delete">Delete</a>

I need some code that iterates through all the check boxes and than gets those that are checked to send them to the server. The server than deletes those folders/files. Can anyone please suggest me what I can do to achieve this?

Answer 1

You can loop over files you have checked using phps foreach loop.

Here's example for that kind of delete script:

$path_to_folder = "folder/";
foreach ($_POST['select[]'] as $file) {
    if(file_exists($path_to_folder . $file))) {
        unlink($path_to_folder . $file); 
    }
    elseif(is_dir($file)) {
        rmdir($file); // or system("rm -rf " . escapeshellarg($dir)); 
    }
}
echo "Files deleted successfully.";

And you better pass value from checkbox, not its id. Remember also add brackets to your input's name, because then php recognizes it as array.

<input name="select[]" type="checkbox" class="select" value="'.$file.'"/>

See more on this question: How do I recursively delete a directory and its entire contents (files + sub dirs) in PHP?

Answer 2

$(document).ready(function(){
 $('#btn_delete').click(function(){
        var id = [];
        $(':checkbox:checked').each(function(i){
        id[i] = $(this).val();
        });
        $.ajax({
        headers : {'X-CSRF-TOKEN' : $('input[name=_token]').val()  },
        url:'/images/multiple',
        method:'POST',
        data:{id:id},
        success:function()
        {
      window.location.reload();
        }
        });


 });
});

<div class="col-lg-9 animated fadeInRight">
  <div class="row" >
    <div align="left" id="btn-p">
      <div id="btn-c">
        @if($folder)
          <button type="button" name="btn_delete" id="btn_delete" class="btn btn-info"><span style="color:red; font-size: 1.50em;"><i class="fa fa-trash pull-right" aria-hidden="true"></i></span></button>
        @endif
      </div>
    </div>
    <div class="col-lg-12" id="image-p">
      <div class="file" id="image-c">

        @foreach ($images as $image)
         <div class="col-lg-3" style="min-height:350px">
          <label class="pull-left"><input type="checkbox" value="{{$image->id}}" name="checkbox[]" id="checkAll"/></label>

            <td><a style="margin-left: 20px;" onclick="delete_img({{ $image->id }})" href ="javascript:void(0)"><span style="color:red; font-size: 1.50em;"><i class="fa fa-trash pull-right" aria-hidden="true"></i></span></td>

              <a href="#">
                <tr>
                 <td><img src="/{{$image->path}}" width="100%" height="180px" width="150px" > </td>
                </tr>
               </a>
              <form>
                {{ csrf_field() }}
                <input type="hidden" name="id" value="{{$image->id}}">
                  <div class="form-group">
                    <textarea name="message"style="background-color:skyblue; width:200px" onkeyup="test($(this).closest('form'))" onkeydown="test($(this).closest('form'))"    class="message" rows="2">{{ $image->message }}</textarea>
                  </div>
              </form>
           </div>
        @endforeach
      </div>
    </div>
  </div>
</div>