How to programatically update dropzone preview filename after using fileRename option

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! :slight_smile:

Ben

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

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)

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

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