Dropzone.js - How to change file name before uploading to folder

Question

I am using DropzoneJS script for uploading images with drag & drop, but now I\'m looking for a solution for how to add current timestamps with file name before uploading

Answer 1

I just used the standard php file rename.

$targetFile =  $targetPath . $_FILES['file']['name']; //the original upload
$newfilename = "somename" . $variable . ".jpg"; //a new filename string

rename($targetFile , $new); //rename at the end of the function

This worked well for me and was pretty simple to implement. The .jpg extension is probably not recommended to hard code but in my scenario im only getting jpg file types.

Answer 2

Please check following code I have implemented using PHP.

Use Following code in your index file

$(document).ready(function() {
            Dropzone.autoDiscover = false;
            var fileList = new Array;
            var i =0;
            $("#some-dropzone").dropzone({
                addRemoveLinks: true,
                init: function() {

                    // Hack: Add the dropzone class to the element
                    $(this.element).addClass("dropzone");

                    this.on("success", function(file, serverFileName) {
                        fileList[i] = {"serverFileName" : serverFileName, "fileName" : file.name,"fileId" : i };
                        //console.log(fileList);
                        i++;

                    });
                    this.on("removedfile", function(file) {
                        var rmvFile = "";
                        for(f=0;f<fileList.length;f++){

                            if(fileList[f].fileName == file.name)
                            {
                                rmvFile = fileList[f].serverFileName;

                            }

                        }

                        if (rmvFile){
                            $.ajax({
                                url: "http://localhost/dropzone/sample/delete_temp_files.php",
                                type: "POST",
                                data: { "fileList" : rmvFile }
                            });
                        }
                    });

                },
                url: "http://localhost/dropzone/sample/upload.php"
            });

        });

Upload.php

<?php
$ds = DIRECTORY_SEPARATOR;  // Store directory separator (DIRECTORY_SEPARATOR) to a simple variable. This is just a personal preference as we hate to type long variable name.
$storeFolder = 'uploads';   // Declare a variable for destination folder.
if (!empty($_FILES)) {

    $tempFile = $_FILES['file']['tmp_name'];          // If file is sent to the page, store the file object to a temporary variable.
    $targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds;  // Create the absolute path of the destination folder.
    // Adding timestamp with image's name so that files with same name can be uploaded easily.
    $date = new DateTime();
    $newFileName = $date->getTimestamp().$_FILES['file']['name'];
    $targetFile =  $targetPath.$newFileName;  // Create the absolute path of the uploaded file destination.
    move_uploaded_file($tempFile,$targetFile); // Move uploaded file to destination.

    echo $newFileName;
}
?>

delete_temp_files.php

<?php
$ds = DIRECTORY_SEPARATOR;  // Store directory separator (DIRECTORY_SEPARATOR) to a simple variable. This is just a personal preference as we hate to type long variable name.
$storeFolder = 'uploads'; 

$fileList = $_POST['fileList'];
$targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds;


if(isset($fileList)){
    unlink($targetPath.$fileList);
}

?>

Hope this will be helpful for uploading images using ajax and delete using ajax :)

I have found from following references:

Dropzone.js- How to delete files from server? Dropzone.js remove button with php

Also add following code in your dropzone.js file after line #1110 for preventing user to upload duplicate files with same name :)

Dropzone.prototype.addFile = function(file) {
    if (this.files.length) {
        var _i, _len;
        for (_i = 0, _len = this.files.length; _i < _len; _i++) {
            if(this.files[_i].name === file.name && this.files[_i].size === file.size) {
                return false;
        }
    }
}

Reference Link: https://www.bountysource.com/issues/2993843-dropzone-did-not-check-the-duplicate-file-on-addfile?utm_campaign=plugin&utm_content=tracker%2F283989&utm_medium=issues&utm_source=github

Answer 3

To prefix the filename with a timestamp each time before upload, you have two options depending on you version of DropzoneJS.

The newer versions of DropzoneJS 5.1+ does have a renameFile function that is used as followed:

    ...
    renameFile: function (file) {
        return new Date().getTime() + '_' + file.name;
    }
    ...

---

In older versions v4.3 - v5.1 this is done a little bit different.

In this versions there is a renameFilename option, this is used like this:

Dropzone.autoDiscover = false;
$(document).ready(function () {
    $(".dropzone").dropzone({
        renameFilename: function (filename) {
            return new Date().getTime() + '_' + filename;
        }
    });
});

Happy coding, Kalasch