php delete only uploaded file on a specific path

Question

I am developing a web app in php (pure php, no framework), I save some file uploaded from the user under a folder uploads in a path like this ./uploads/uid/privacy/ or ./uploads/uid/visita/ according to the files belong to the "privacy" or "visita" category; uid is the user id.

I want the user to upload at most a file in the "privacy" and one in the "visita" section. The uploading process works fine but I have some problems when I want to delete / change the file uploaded from the user.

I have a detail page user_details.php that show all the fields and reports also the file uploaded in this way:

 <div class="form-group">
     <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
         <p>Privacy:</p>
     </div>
     <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
         <?php
         $uploadDir = './uploads';
         $new_dir_path = $uploadDir . DIRECTORY_SEPARATOR . $_GET['id'] . DIRECTORY_SEPARATOR . 'privacy';
         $files = scandir($new_dir_path);
         $firstFile = $new_dir_path . DIRECTORY_SEPARATOR . $files[2];

         if(is_dir($new_dir_path)  ) { ?>
             <i class="fa fa-file-pdf-o"></i><a href="<?php echo $firstFile; ?>" download="<?php echo $files[2]; ?>"><?php echo $files[2]; ?></a></i>
             <i id="delete_privacy" class="fa fa-scissors"></i>
         <?php } else {
             echo '-';
         }?>

     </div>
 </div>
 <div class="form-group">
     <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
         <p>Foglio di visita:</p>
     </div>
     <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
         <?php
         $uploadDir = './uploads';
         $new_dir_path = $uploadDir . DIRECTORY_SEPARATOR . $_GET['id'] . DIRECTORY_SEPARATOR . 'visita';
         $files = scandir($new_dir_path);
         $firstFile = $new_dir_path . DIRECTORY_SEPARATOR . $files[2];

         if(is_dir($new_dir_path)) { ?>
             <i class="fa fa-file-pdf-o"></i><a href="<?php echo $firstFile; ?>" download="<?php echo $files[2]; ?>"><?php echo $files[2]; ?></a>
             <i id="delete_visita" class="fa fa-scissors" style="margin-left: 5px; color:red; font-weight: bold"></i>
         <?php } else {
             echo '-';
         }?>
     </div>
 </div>

In this details page, I inserted a font-awesome icon .fa-scissors that allows the user to delete the file (from the storage); and so, when the user click on this icon this javascript function is triggered:

$('#delete_privacy').click( () => {
    console.log('delete privacy')
    deletePrivacyWarning()
});
$('#delete_visita').click( () => {
    console.log('delete visita')
    deleteVisitaWarning()
});
function deletePrivacyWarning() {
    var r = confirm("Delete the file in the Privacy folder?
" );
    if ( r ) {
        <?php
        $new_dir_path_privacy = $uploadDir . DIRECTORY_SEPARATOR . $_GET['id'] . DIRECTORY_SEPARATOR . 'privacy';
        $files_privacy = scandir($new_dir_path_privacy);
        $firstFile_privacy = $new_dir_path_privacy . DIRECTORY_SEPARATOR . $files_privacy[2];
        unlink($firstFile_privacy);
        ?>
        window.location.reload();
    }
}
function deleteVisitaWarning() {
    var r = confirm("Delete the file in visita folder?
" );
    if ( r ) {
        <?php
        $new_dir_path_visita = $uploadDir . DIRECTORY_SEPARATOR . $_GET['id'] . DIRECTORY_SEPARATOR . 'visita';
        $files_visita = scandir($new_dir_path_visita);
        $firstFile_visita = $new_dir_path_visita . DIRECTORY_SEPARATOR . $files_visita[2];
        unlink($firstFile_visita);
        ?>
        window.location.reload();
    }
}

so I created two different process, one for the deleting of the file in the "privacy" folder, and one for the file in the "visita" folder.

The problem is that when I click on an icon all the two files ( either the one on the privacy folder of the one in the visita folder) are deleted. That is like if all the two functions are triggered. I put some console.log() inside the functions but I see that actually only the function called is executed, so I can't understand why the files in all the two folders are deleted.

Can someone help me?

question from:https://stackoverflow.com/questions/65647938/php-delete-only-uploaded-file-on-a-specific-path

Answer 1

Do you realise that PHP is executed on the server and Javascript runs on the browser? Read this for more information. Your PHP code is executed BEFORE anything is sent to the browser (and by extension; javascript).

    function deletePrivacyWarning() {
    var r = confirm("Delete the file in the Privacy folder?
" );
    if ( r ) {
        <?php
        $new_dir_path_privacy = $uploadDir . DIRECTORY_SEPARATOR . $_GET['id'] . DIRECTORY_SEPARATOR . 'privacy';
        $files_privacy = scandir($new_dir_path_privacy);
        $firstFile_privacy = $new_dir_path_privacy . DIRECTORY_SEPARATOR . $files_privacy[2];
        unlink($firstFile_privacy);
        ?>
        window.location.reload();
    }
}

This code is executed by PHP BEFORE being sent to the client browser. Once this code is on the client browser THEN the Javascript runs.

What is happening is your

        <?php
        $new_dir_path_privacy = $uploadDir . DIRECTORY_SEPARATOR . $_GET['id'] . DIRECTORY_SEPARATOR . 'privacy';
        $files_privacy = scandir($new_dir_path_privacy);
        $firstFile_privacy = $new_dir_path_privacy . DIRECTORY_SEPARATOR . $files_privacy[2];
        unlink($firstFile_privacy);
        ?>

Is being executed regardless of anything in Javascript.

What you could do is run a Javascript AJAX request to send the delete instuction to a PHP file on the server to then execute the delete command. BUT you will need to ensure some security and authentication mechanisms so that people can not delete arbitary files on the server that they should not delete.

Overall, using Javascript in this way with deleting files on a server from javascript browser execution seems extremely dangerous. Either use a HTML form submission or use a AJAX request to the same effect.