Dropzone: prevent addfile twice

Question

I'm using dropzone to upload images to gallery. I'm submiting by button. Is it possible to prevent adding same file twice? I'm not really sure if checking name or name and size. Here's my code:

<script>
      var i = 0;
      Dropzone.options.myDropzone = {
        init: function() {
            this.on("addedfile", function(file) {
            i=++i;

check filenames and filesizes of other files here

----------->if(){
                myDropzone.removeFile(file);
            }


            var inputs = Dropzone.createElement('<div class="dz-image-metadata"><label for="'+i+'_title">Nazov</label><input type="hidden" name="'+i+'_filename" value="'+file.name+'"><input type="text" name="'+i+'_title" value="'+file.name+'" /><label for="">Popis</label><input type="text" name="'+i+'_desc"></div>');
            file.previewElement.appendChild(inputs);
            var removeButton = Dropzone.createElement("<button class=\"dz-button\">Vymazať</button>");
            var _this = this;
            removeButton.addEventListener("click", function(e) {
              e.preventDefault();
              e.stopPropagation();
              i=--i;
              _this.removeFile(file);
            });
            file.previewElement.appendChild(removeButton);
          });
          var myDropzone = this;
           $("#submit-all").click(function (e) {
            e.preventDefault();
            e.stopPropagation();
            myDropzone.processQueue();
            i=0;
        }
        );

         this.on("successmultiple", function(files, response) {
           console.log(response);
        });

         this.on("complete", function(file) {
            myDropzone.removeFile(file);
        });

        this.on("errormultiple", function(files, response) {
             });
        },
        autoProcessQueue: false,
        previewsContainer: ".dropzone",
        uploadMultiple: true,
        parallelUploads: 25,
        maxFiles: 25,
      };
    </script>

Delaminate

Answer 1

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);
            }
        }
    }
});

Sagesagebrush

I used your answer code but after adding your code the preview of images not showing on my div ? Can you help me with that ? – Demanding

Answer 2

 this.on("addedfile", function (file) {
                    if (this.files.length) {
                        var i, len, pre;
                        for (i = 0, len = this.files.length; i < len - 1; i++) {
                            if (this.files[i].name == file.name) {
                                alert("The Doc.: " + file.name + " is already registered.")
                                return (pre = file.previewElement) != null ? pre.parentNode.removeChild(file.previewElement) : void 0;
                            }
                        }
                    }
                });

Abdominous

This simply notifies the user that they are uploading a duplicate file, but the upload still goes through. – Midstream

Answer 3

Checking the file name and size should be fine. I already tested that and it had worked almost fine for me and haven't crossed any issues with it.

The original thread I landed in was a Git issue #639 where a community member posted his solution for name and size verification.

That trick was also mentioned in a similar post answer.

Latticework

im not sure what im doing wrong, i copy-paste that code to my dropzone.js but it is still possible to upload same file twice. – Delaminate