Dropzone on submit shows never ending Cancel Upload with error FileReader.readAsDataURL:

Question

The below dropzone with re-ordering script is adding images but when i re-queue the existing files and add a new file of not after pressing Submit/update button it removes the thumbnail and shows never ending Cancel Upload

After removing this line myDropzone.removeAllFiles(); it does nothing.

Error with both option is (TypeError: FileReader.readAsDataURL: Argument 1 does not implement interface Blob.)

<form name="foo" method="post" accept-charset="utf-8" action="edititemmainsingleallsubmit" enctype="multipart/form-data" class="dropzone" id="my-dropzone">
<div class="m-portlet__body">
    <div class="dz-message">
        <div class="dropIcon">
            <i style="font-size: 100px;" class="fa fa-upload"></i>
        </div>
        <h3>Drop files here.</h3>
    </div>
    <div class="dropzone-previews">
    </div>
</div>
</form>


<script type="text/javascript">
$(document).ready(function(){
 $('.dropzone-previews').sortable();
   
});

var articleID = "<?php echo $gid; ?>";
Dropzone.options.myDropzone = {
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 5,
maxFiles: 5,
acceptedFiles: "image/*",
init: function() {
    var submitButton = document.querySelector("#submit");
    var myDropzone = this; // closure

    var item_id = "<?php echo $gid; ?>";
    var i = 0;

    $.ajax({
        url: 'items_main_single_all_edit_images.php',
        type: 'post',
        data: {request: 2, item_id: item_id},
        dataType: 'json',
        success: function(data){
            $.each(data, function(key,value) {
                var filename = value.name;
                var extension = filename.split(".").pop();
                var mockFile = { name: value.name, size: value.size, type: "image/"+extension, status: Dropzone.QUEUED, upload: {} };
                myDropzone.emit("addedfile", mockFile);
                myDropzone.emit("thumbnail", mockFile, value.path);
                myDropzone.files.push(mockFile);
                myDropzone.options.maxFiles = (myDropzone.options.maxFiles - 1);
            });
        }
    });

    submitButton.addEventListener("click", function(e) {
        var files = myDropzone.getQueuedFiles();
        alert(files); **//this shows [object Object]**
        files.sort(function(a, b){
        return ($(a.previewElement).index() > $(b.previewElement).index()) ? 1 : -1;
    });

    myDropzone.removeAllFiles();
    myDropzone.handleFiles(files);
    myDropzone.processQueue();
    });

    this.on("removedfile", function(file) {
        var imageName = file.name;
        var five = myDropzone.options.maxFiles;
        $.post("items_main_single_all_edit_delete_image.php?image_id=" + imageName +"&itemsd_id="+ articleID);
        myDropzone.options.maxFiles = five + 1;
    });

    this.on("maxfilesexceeded", function(file){
        alert('Maximum files exceeded.');
        var _ref = file.previewElement;
        _ref.parentNode.removeChild(file.previewElement);
        myDropzone.options.maxFiles = myDropzone.options.maxFiles;
    });

    this.on('completemultiple', function(file, json) {
        $('.dropzone-previews').sortable('enable');
    });
    this.on("addedfile", function(file) {
        $("#submit").show();
    });
    myDropzone.on('sending', function(file, xhr, formData){
        formData.append('token','null');
    });
    myDropzone.on('success', function(file, resp){
        console.log("success");
        window.location.href = "all/items/single/";
    });
}
};
</script>