How to programatically update dropzone preview filename after using fileRename option - dropzone.js

Question

I have a DropZone script (as below) that renames the uploaded image into a unique folder with a unique timestamp to avoid duplicates. When I add the file, it creates the unique directory (session_id) and uploads and renames the image correctly, however, the DropZone preview image still shows the original filename so the remove links do not work. If I refresh the page, the thumbnails are labelled correctly with the new filename and the remove links work. How can I update the script to do this after the initial upload/rename?
Dropzone.autoDiscover = false;
$(".dropzone").dropzone({
url: "upload.php",
addRemoveLinks: true,
maxFiles: 5,
acceptedFiles: "image/*",
// Check for previously uploaded images and display in the dropzone
init: function() {
myDropzone = this;
$.ajax({
url: 'upload.php',
type: 'post',
data: {request: 2},
dataType: 'json',
success: function(response) {
$.each(response, function(key,value){
var mockFile = { name: value.name, size: value.size };
myDropzone.emit("addedfile", mockFile);
myDropzone.emit("thumbnail", mockFile, value.path);
myDropzone.emit("complete", mockFile);
});
}
});
},
// Rename uploaded files to unique name
renameFile: function (file) {
let newName = new Date().getTime() + '_' + file.name;
return newName;
},
// Remove the uploaded file if the "Remove file" link is pressed
removedfile: function(file) {
var name = file.name;
$.ajax({
type: 'post',
url: 'delete.php',
data: "id="+name,
dataType: 'html'
});
var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
},
});
This is the upload.php file:
<?php
include $_SERVER['DOCUMENT_ROOT'] . '/inc/config.inc.php';
$upload_folder = "uploads/".session_id();
if(!file_exists($upload_folder)) {
mkdir($upload_folder);
}
$target_dir = $upload_folder."/";
$request = 1;
if(isset($_POST['request'])){
$request = $_POST['request'];
}
// Upload file
if($request == 1){
$target_file = $target_dir . basename($_FILES["file"]["name"]);
if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_file)) {
echo $target_file;
}else{
echo 0;
}
die;
}
// Read files from
if($request == 2){
$file_list = array();
// Target directory
$dir = $target_dir;
if (is_dir($dir)){
if ($dh = opendir($dir)){
// Read files
while (($file = readdir($dh)) !== false){
if($file != '' && $file != '.' && $file != '..'){
// File path
$file_path = $target_dir.$file;
// Check its not folder
if(!is_dir($file_path)){
$size = filesize($file_path);
$file_list[] = array('name'=>$file,'size'=>$size,'path'=>$file_path);
}
}
}
closedir($dh);
}
}
echo json_encode($file_list);
exit;
}
?>
This is the delete.php file:
<?php
include $_SERVER['DOCUMENT_ROOT'] . '/inc/config.inc.php';
$upload_folder = "uploads/".session_id();
$target_dir = $upload_folder."/";
if(isset($_POST['id'])){
$filename = $_POST['id'];
}
// Delete file
$target_file = $target_dir . $filename;
if (unlink($target_file)) {
echo $target_file;
}else{
echo 0;
}
die;
?>
(NOTE: session_start() is called in the included config file)
Feel free to let me know if there are any other bad ideas in here! :)
Ben

Answer 1

So the answer for this has been solved! For reference the following is the fixes applied.
renameFile: and removedfile: have both been updated as per the comments below.
The changes in the renameFile: section make the newly generated filename available to be referenced later when using the removedfile: Ajax call to delete.php
The init: > success: has been updated changing the mockFile variable.
This ensures that removefile: still works correctly on a page reload (e.g. is there was a form POST and an error needed to be corrected) where the images are now read directly from the folder location.
Full code update:
Dropzone.autoDiscover = false;
$(".dropzone").dropzone({
url: "upload.php",
dictDefaultMessage: "", // remove default text
addRemoveLinks: true,
maxFiles: 5,
acceptedFiles: "image/*",
// Check for previously uploaded images and display in the dropzone
init: function() {
myDropzone = this;
$.ajax({
url: 'upload.php',
type: 'post',
data: {request: 2},
dataType: 'json',
success: function(response) {
$.each(response, function(key,value){
var mockFile = {
newName: value.name,
name: value.name.substr(value.name.indexOf('_') + 1),
size: value.size
};
myDropzone.emit("addedfile", mockFile);
myDropzone.emit("thumbnail", mockFile, value.path);
myDropzone.emit("complete", mockFile);
});
}
});
},
// Rename uploaded files to unique name
renameFile: function (file) {
let newName = new Date().getTime() + '_' + file.name;
// Add new name to the file object:
file.newName = newName;
// As an object is handed over by reference it will persist
return newName;
},
// Remove the uploaded file if the "Remove file" link is pressed
removedfile: function(file) {
// Get new name from file object:
var newName = file.newName;
$.ajax({
type: 'post',
url: 'delete.php',
data: "id="+newName,
dataType: 'html'
});
var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
},
});
Thanks to the user "Sempervivum" on webdeveloper.com for the fix.