WP / Ajax | Jquery Dropzone js file Upload Calling twice Request

Question

I m using Jquery Dropzone js for file upload, on server-side PHP / WordPress, I saw also same problem here I try many ways but still it calling twice request for file upload. If you see any mistake in my dropzone settings can you help please.

I also use settings from this link: Dropzone file upload twice problem but still same.

jQuery(document).ready(function(jQuery){
"use strict";
jQuery.noConflict();
if(jQuery('div').is('#fvr_dropzone')){
    Dropzone.autoDiscover = false;
}
if(jQuery('div').is('#fvr_dropzone')){
    var fvrDropZone = jQuery("#fvr_dropzone");
    var maxfile = fvrDropZone .data("max-file");
    var maxsize = fvrDropZone .data("max-size");
    var filemsg = jQuery(".dz-max-file-msg");
    var removemsg = jQuery(".dz-remove").html();
    var ourIDS = '';
    fvrDropZone .dropzone ({
        url: options.ajaxurl,
        acceptedFiles: "image/*",           
        maxFiles: maxfile,
        parallelUploads: 10,
        uploadMultiple: true,                   
        addRemoveLinks: true,
        maxFilesize: maxsize,
        dictRemoveFile: removemsg,
        autoProcessQueue: false,
        autoDiscover: false,
        init: function() {
            this.on("error", function(file, response) {
                jQuery('.dropzoneAlert').html(response);
                jQuery('.dz-max-file-msg').show();
                this.removeFile(file);
                allfile_uploaded = true;
            });
            this.on("sending", function(file, xhr, formData) {
                allfile_uploaded = false;
                formData.append("action", "fvr_media_upload");
            });
            this.on("success", function(file, response) {

                if (response.error === false) {
                     jQuery(file.previewElement).append('<input name="attachedids[]" type="hidden" value="'+ response.attachedID +'">');
                     jQuery(file.previewElement).attr("id", response.attachedID);
                }else {
                    alert(response.msg);
                    this.removeFile(file);
                }                   

            });
            this.on("complete", function(file, response) {
                jQuery('#fvr_dropzone').sortable();
                allfile_uploaded = true;
                submit_myform ();
            });
            this.on("removedfile", function(file) {
                var attachedID = jQuery(file.previewElement).attr("id");
                var attachedData = {
                    'action': 'fvr_media_upload',           
                    'delete_attached': attachedID
                };
                jQuery.ajax({
                    type : 'POST',
                    dataType : 'json',
                    url : options.ajaxurl,
                    data : attachedData,                        
                });
            });
        },
    });
}});

My form, My Dropzone, My button are here

<form class="form-horizontal" action="" role="form" id="primaryPostForm" method="POST" data-toggle="validator" enctype="multipart/form-data">

<!--dropzone-->
                                    <div class="dropzone dz-clickable mb-4" id="fvr_dropzone" data-max-file="<?php echo esc_attr($imageLimit ); ?>">
                                        <div class="dz-default dz-message" data-dz-message="">
                                            <p class="text-center"><i class="far fa-images fa-3x"></i></p>
                                            <span><?php esc_html_e( 'Drop files here to upload', 'fvr' ); ?></span>
                                            <span><?php esc_html_e( 'or', 'fvr' ); ?></span>
                                            <strong>
                                                <?php esc_html_e( 'Click here', 'fvr' ); ?>
                                            </strong>
                                            <span><?php esc_html_e( 'to select images', 'fvr' ); ?></span>
                                            <p class="text-muted">(<?php esc_html_e( 'Your first image will be used as a featured image, and it will be shown as thumbnail.', 'fvr' ); ?>)</p>
                                        </div>
                                        <div class="dz-max-file-msg">
                                            <div class="alert alert-danger text-center">

                                                <?php esc_html_e('You can upload', 'fvr') ?>&nbsp;<?php echo esc_attr( $imageLimit ); ?>&nbsp;<?php esc_html_e('images maximum.', 'fvr') ?>
                                            </div>
                                        </div>
                                        <div class="dz-remove" data-dz-remove>
                                            <span><?php esc_html_e('Remove', 'fvr') ?></span>
                                        </div>                              
                                    </div>

This is how I m calling.processQueue() function with js.

<script type="text/javascript">
//Check if all files uploaded
var allfile_uploaded = false;

function SubmitDonationForm (ev) {
// Upload photos first
    var myDropzone = Dropzone.forElement("#fvr_dropzone");
    myDropzone.processQueue();


}

function submit_myform () {
    if (allfile_uploaded) {
        jQuery('form#primaryPostForm').submit();
    }else {
        alert("Please wait while file uploading...")
    }
}

Answer 1

jQuery(document).ready(function(jQuery){
"use strict";
jQuery.noConflict();
if(jQuery('div').is('#fvr_dropzone')){
    Dropzone.autoDiscover = false;
}
if(jQuery('div').is('#fvr_dropzone')){
    var fvrDropZone = jQuery("#fvr_dropzone");
    var maxfile = fvrDropZone .data("max-file");
    var maxsize = fvrDropZone .data("max-size");
    var filemsg = jQuery(".dz-max-file-msg");
    var removemsg = jQuery(".dz-remove").html();
    var ourIDS = '';
    fvrDropZone .dropzone ({
        url: options.ajaxurl,
        acceptedFiles: "image/*",           
        maxFiles: maxfile,
        parallelUploads: 10,
        uploadMultiple: true,                   
        addRemoveLinks: true,
        maxFilesize: maxsize,
        dictRemoveFile: removemsg,
        autoProcessQueue: false,
        autoDiscover: false,
        init: function() {
            this.on("error", function(file, response) {
                jQuery('.dropzoneAlert').html(response);
                jQuery('.dz-max-file-msg').show();
                this.removeFile(file);
                allfile_uploaded = true;
            });
            this.on("sending", function(file, xhr, formData) {
                allfile_uploaded = false;
                formData.append("action", "fvr_media_upload");
            });
            this.on("success", function(file, response) {

                if (response.error === false) {
                     jQuery(file.previewElement).append('<input name="attachedids[]" type="hidden" value="'+ response.attachedID +'">');
                     jQuery(file.previewElement).attr("id", response.attachedID);
                }else {
                    alert(response.msg);
                    this.removeFile(file);
                }                   

            });
            this.on("complete", function(file, response) {
                jQuery('#fvr_dropzone').sortable();
                allfile_uploaded = true;
                // submit_myform();
            });
            this.on("removedfile", function(file) {
                var attachedID = jQuery(file.previewElement).attr("id");
                var attachedData = {
                    'action': 'fvr_media_upload',           
                    'delete_attached': attachedID
                };
                jQuery.ajax({
                    type : 'POST',
                    dataType : 'json',
                    url : options.ajaxurl,
                    data : attachedData,                        
                });
            });
        },
    });
}});