bootstrap fileinput, show uploaded files and delete them

Question

how can i show and delete previously uploaded files with the great bootstrap-fileinput plugin from krajee, my code is:

html:

<script>
$("#images").fileinput({
    uploadAsync: true,
    uploadUrl: "upload.php"
}).on("filebatchselected", function(event, files) {
$("#images").fileinput("upload");
});
</script>

upload.php:

<?php
if (empty($_FILES['images'])) {
echo json_encode(['error'=>'No files found for upload.']);
return;
}
$images = $_FILES['images'];
$success = null;
$paths= [];
$filenames = $images['name'];
for($i=0; $i < count($filenames); $i++){
$ext = explode('.', basename($filenames[$i]));
$target = "uploads" . DIRECTORY_SEPARATOR . basename($filenames[$i]);
if(move_uploaded_file($images['tmp_name'][$i], $target)) {
    $success = true;
    $paths[] = $target;
} else {
    $success = false;
    break;
}
}
if ($success === true) {
$output = ['uploaded' => $paths];
} elseif ($success === false) {
$output = ['error'=>'Error while uploading images. Contact the system administrator'];
foreach ($paths as $file) {
    unlink($file);
}
} else {
$output = ['error'=>'No files were processed.'];
}
echo json_encode($output);
?>

Has anyone an idea ? i think i have to scan the uploads dir and send it back with json or use $output, but i dont know how to this ?

Answer 1

Since you are using json to upload files, you can use it to delete them too. Make another ajax call to the server by sending an array of the image URLs that you want to remove. Then with PHP you can simply unlink them.

So for example: http://jsfiddle.net/fdzsLa0k/1/

var paths = []; // A place to store all the URLs

// Loop through all images
// You can do it for a single image by using an id selector and skipping the looping part
$('.uploaded-img').each(function(i, v) {
    paths.push(this.src); // Save found image paths
})
console.log(paths); // Preview the selection in console

// Send the URLs to the server for deletion
$.ajax({
    method: 'post',
    data: { images: paths },
    url: 'ajax.php' // Replace with your ajax-processing file
}).success(function(response) {
    console.log(response); // Do fun stuff: notify user, remove images from the loaded HTML
});

Answer 2

uuuhh, the fileinput script need php version higher than 5.3.3, because the plesk panel of my hosting provider supports only 5.3.3 i have the problems, since 11.5 plesk supports multiple php version for each domain on the server, now with php 5.6 everything works great !