How to prevent dropZone to go over maxFile after reload the page

Question

I am using the maxFile parameter for DropZone to allow in maximum one picture in the dropzone. It's working as long we do not reload the page. During the reload we read the files from the server an add the file into the dropzone. If there then one picture in the dropzone, then we can add another picture. See the code below! Where is my mistake?

Dropzone.autoDiscover = false;


$("#Titelbild").dropzone({
  maxFiles: 1,
  maxFilesize: 2, // Filesize 2 MByte  
  addRemoveLinks: true,
  acceptedFiles: ".jpeg,.jpg,.png,.gif,.jfif",
  
removedfile: function(file) {
       var fileName = file.name; 
         
       $.ajax({
         type: 'post',
         url: 'Delete_picture.php',
         data: {name: fileName, request: 'delete'},
         sucess: function(data){
            console.log('success: ' + data);
            // alert(data);
         }
        });

        var _ref;
        return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
  },  

  init: function() { 
    myDropzone1 = this;
  
    $.ajax({
      url: 'Fetch_picture.php',
      type: 'post',
      data: {request: 'fetch'},
      dataType: 'json',      
      success: function(response){
        var filecounter = 0;

        $.each(response, function(key,value) {
          var mockFile = { name: value.name, size: value.size};
          myDropzone1.emit("addedfile", mockFile);
          myDropzone1.emit("thumbnail", mockFile, value.path);
          myDropzone1.emit("complete", mockFile);

          };

        });

    }
   
    });
    
  }
});

Answer 1

Add this

myDropzone1.files.push(mockFile);

after your line

myDropzone1.emit("complete", mockFile);

This did the trick for me