How to programatically update dropzone preview filename after using fileRename option

[averywebdesign]

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

[averywebdesign]

Sandbox of the form is available here:http://sandbox.baweb.co.uk/

[averywebdesign]

To see the wrong behaviour:

1. Upload an image
2. Click the remove link (preview file disappears)
3. Refresh the page (file reappears with correct new name)
4. Remove file again (file now deletes correctly)

[averywebdesign]

So the answer for this has been solved! For reference the following is the fixes applied.

1. 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

2. 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.