Dropzone: prevent uploading of duplicate files

Question

I am using Dropzone. I'd like to prevent the uploading of a file which already exists as thumbnail in Dropzone "panel". With uploading I mean not to allow a file with the same name to be shown twice in the panel. I do not care about the case of the file already existing in the server and not showing in the panel, since it will be replaced by the new one with the same name.

I cannot find how to achieve that despite my efforts. I'd appreciate your help.

Thank you very much

Paternoster

Try this. I had the similar issue recently. I get it done by aid of this. bountysource.com/issues/… – Workday

Possible duplicate of Dropzone: prevent addfile twice – Petrography

Here : dropzone.w3clan.com/tutorial/409/… – Natalianatalie

Answer 1

Update for newest version:

Add these simple lines of code:

myDropzone.on("addedfile", function(file) {
    if (this.files.length) {
        var _i, _len;
        for (_i = 0, _len = this.files.length; _i < _len - 1; _i++) // -1 to exclude current file
        {
            if(this.files[_i].name === file.name && this.files[_i].size === file.size && this.files[_i].lastModified.toString() === file.lastModified.toString())
            {
                this.removeFile(file);
            }
        }
    }
});

For older versions:

Add these simple lines of code:

myDropzone.on("addedfile", function(file) {
    if (this.files.length) {
        var _i, _len;
        for (_i = 0, _len = this.files.length; _i < _len - 1; _i++) // -1 to exclude current file
        {
            if(this.files[_i].name === file.name && this.files[_i].size === file.size && this.files[_i].lastModifiedDate.toString() === file.lastModifiedDate.toString())
            {
                this.removeFile(file);
            }
        }
    }
});

Colly

Yes, but the file is already sitting on the server... So it would be better to prevent it from being uploaded. – Kendy

only drawback is that despite file is removed event "thumbnail" will occur anyway - so it looks like dropzone waste CPU resources on making thumbnail – Getty

In the current version the property lastModifiedDate is now lastModified. – Blessington

Answer 2

Here is the solution I came to:

Add these two options in your Dropzone initialization

dictDuplicateFile: "Duplicate Files Cannot Be Uploaded",

preventDuplicates: true,

and add one more prototype function and re-implement your dropzone addFile prototype function above dropzone initialization like this:

Dropzone.prototype.isFileExist = function(file) {
      var i;
      if(this.files.length > 0) {
        for(i = 0; i < this.files.length; i++) {
          if(this.files[i].name === file.name 
            && this.files[i].size === file.size 
            && this.files[i].lastModifiedDate.toString() === file.lastModifiedDate.toString())
           {
               return true;
           }
        }
      }
      return false;
    };

Dropzone.prototype.addFile = function(file) {
      file.upload = {
        progress: 0,
        total: file.size,
        bytesSent: 0
      };
      if (this.options.preventDuplicates && this.isFileExist(file)) {
        alert(this.options.dictDuplicateFile);
        return;
      }
      this.files.push(file);
      file.status = Dropzone.ADDED;
      this.emit("addedfile", file);
      this._enqueueThumbnail(file);
      return this.accept(file, (function(_this) {
        return function(error) {
          if (error) {
            file.accepted = false;
            _this._errorProcessing([file], error);
          } else {
            file.accepted = true;
            if (_this.options.autoQueue) {
              _this.enqueueFile(file);
            }
          }
          return _this._updateMaxFilesReachedClass();
        };
      })(this));
    };

You can also modify your drozone file if you want.

Longstanding

Thanks its working i was just going to remove it unless i saw that its false and should be true – Carbonaceous

checkout my solution, which is slightly better https://mcmap.net/q/695882/-dropzone-prevent-uploading-of-duplicate-files – Dniren

Answer 3

I'm checking from the server if the file is duplicate and then returning the error to dropzone,ee below:

 $targetPath = '/tmp/my_dropzone_files';
 $image_name = $_FILES['file']['name'];
 $targetFile =  $targetPath . '/' . $image_name; 

        $file_exists = file_exists ( $targetFile );

        if( !$file_exists ) //If file does not exists then upload
        {
            move_uploaded_file( $tempFile, $targetFile );
        }
        else //If file exists then echo the error and set a http error response
        {
            echo 'Error: Duplicate file name, please change it!';
            http_response_code(404);
        }

Crossbeam

in case of big upload this will be a problem because we have to upload the whole file first and then check it.instead it should be checked before upload start – Carbonaceous

Answer 4

Sorry, won't be able to add a comment to @Luca's answer.

The loop needs to break to prevent a possible issue with multiple duplicated files added.

myDropzone.on("addedfile", function(file) {
    if (this.files.length) {
        var _i, _len = this.files.length;
        for (_i = 0; _i < _len - 1; _i++) // -1 to exclude current file
        {
            if(this.files[_i].name === file.name && this.files[_i].size === file.size && this.files[_i].lastModifiedDate.toString() === 
file.lastModifiedDate.toString())
            {
                this.removeFile(file);
                break;
            }
        }
    }
});

Field

Answer 5

I can't believe this is still an issue after 8+ years. Manish Jangir had a good solution of overwritting the addFile function. However, it could be better. I override the addFile function but do minimal work and call the original when needed. Instead of 'alerting' I fire an event so the user code can determine what to do. This also prevents the thumbnail being created and prevents bugs from Dropzone if it changes how that function works in the future.

import Dropzone from "dropzone";
    
const addFile                  = Dropzone.prototype.addFile;
Dropzone.prototype.addFile     = function (file) {
    if (this.options.preventDuplicates && this.isFileExist(file)) {
        this.emit('duplicatefile', file);
        return;
    }

    addFile.apply(this, [file]);
}
Dropzone.prototype.isFileExist = function (file) {
    let i;
    if (this.files.length > 0) {
        for (i = 0; i < this.files.length; i++) {
            if (this.files[i].name === file.name
                && this.files[i].size === file.size
                && this.files[i].lastModifiedDate.toString() === file.lastModifiedDate.toString()) {
                return true;
            }
        }
    }
    return false;
};

Dniren

note; only issue with this is "drop" events will still emit the "addedfiles" event which will actually include the duplicated file being dropped. However, the file will not be added to the queue but the "addedfiles" event will receive a list of files that are possibly duplicated. i dont use that event, so i dont care. – Dniren

This actually emits the "addedfiles" event regardless of how the file gets there... – Sommerville

Answer 6

The following solution helped me:

this.on('addedfile', function(file) {
    setTimeout(function() { 
        $(".dz-file-preview").remove(); // removes all files except images
    }, 3000);
});

Saied