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

问题

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 to the server folder, because I am not able to upload the same image if the file already exists in the folder.

I have also referred below stackoverflow link but I'm confused where to implement this.

https://stackoverflow.com/a/23805488/3113858
https://stackoverflow.com/a/19432731/3113858

Here is dropzone.js script for reference

回答1:

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

回答2:

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

回答3:

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.

来源：https://stackoverflow.com/questions/24859005/dropzone-js-how-to-change-file-name-before-uploading-to-folder

标签

jquery

image-uploading

dropzone.js