javascript - Can't implement dropzone.js to an existing form

Question

I'm trying to implement the dropzone.js to my existing form, which has a lot of input fields, select options, etc. I tried to follow this answer: https://stackoverflow.com/a/35275260/13695248 but all I earned is if I press the send button, literally nothing happens. No error or anything, it just doesn't do anything. I've got a lot of help from @Swati so I have some extra functions in the dropzone options, but I don't think it causes the problem. This is how the html looks like:

<form action="upload.php" method="post" enctype='multipart/form-data' id="add">
<div class="dropzone" id="uploader"></div>
<input type="text" id="mainimage" name="mainimage">
<!-- lot of input fields here -->
<input type="submit" class="btn btn-primary btn-xl" id="sendButton" name="upload" value="Send" />
</form>

and the JS part:

Dropzone.options.uploader = {
    url: 'upload.php',
    autoProcessQueue: false,
    uploadMultiple: true,
    paramName: "images", // The name that will be used to transfer the file
    maxFilesize: 2, // MB
    maxFiles: 5,
    addRemoveLinks: true,
    acceptedFiles: 'image/*',
    accept: function(file) {
        let fileReader = new FileReader();
        fileReader.readAsDataURL(file);
        fileReader.onloadend = function() {
            $('<a>', {
                class: 'primary',
                text: "Legyen ez a f? kép",
                href: "#"
            }).appendTo(file.previewElement)
            //file.previewElement.append($textContainer)
            console.log(file.previewElement)
            file.previewElement.classList.add("dz-success");
            if (($(".dz-success.dz-complete").length > 0) && ($(".main").length == 0)) {
                $(".dz-success.dz-complete:first .primary").text("F? kép")
                //add class to first one
                $(".dz-success.dz-complete:first").addClass("main")
                $("#mainimage").val($(".dz-success.dz-complete:first").find(".dz-filename span").text()) //add default name to imgs input
            }


        }

        file.previewElement.classList.add("dz-complete");

    },
    "error": function(file, message, xhr) {
        if (xhr == null) this.removeFile(file);
        alert(message);
    },
    removedfile: function(file) {
        var is_there = file.previewElement.classList.contains("main");
        console.log(is_there)
        file.previewElement.remove();

        if (is_there && $(".dz-success.dz-complete").length > 0) {
            $(".dz-success.dz-complete .primary").text("Legyen ez a f? kép")
            $(".dz-success.dz-complete:first .primary").text("F? kép")
            $(".dz-success.dz-complete:first").addClass("main")
            $("#mainimage").val($(".dz-success.dz-complete:first").find(".dz-filename span").text()) //add default name to imgs input


        }


        if ($(".dz-success.dz-complete").length == 0) {

            $("#mainimage").val("")
        }

    },
    init: function() {
        dzClosure = this; // Makes sure that 'this' is understood inside the functions below.

        // for Dropzone to process the queue (instead of default form behavior):
        document.getElementById("sendButton").addEventListener("click", function(e) {
            // Make sure that the form isn't actually being sent.
            e.preventDefault();
            e.stopPropagation();
            dzClosure.processQueue();
        });

        //send all the form data along with the files:
        this.on("sendingmultiple", function(data, xhr, formData) {
            $(":input[name]", $("form")).each(function() {
                formData.append(this.name, $(':input[name=' + this.name + ']', $("form")).val());
            });
        });
    },
    dictDefaultMessage: 'Kérjük húzza ide a képeket vagy kattintson a tallózáshoz!',
    dictFallbackMessage: 'B?ngész?je nem támogatja a kép el?nézetet!',
    dictFallbackText: 'Kérjük használja a tallózást a képek kiválasztásához!',
    dictFileTooBig: 'A fájl mérete túl nagy. ({{filesize}}MiB). Maximum {{maxFilesize}}MiB lehet!',
    dictInvalidFileType: 'A kiválasztott fájl kiterjesztése nem megfelel?!',
    dictResponseError: 'A szerver {{statusCode}} kóddal válaszolt. Kérjük próbálja meg kés?bb!',
    dictCancelUpload: 'Felt?ltés visszavonása',
    dictUploadCanceled: 'felt?ltés visszavonva!',
    dictCancelUploadConfirmation: 'Biztosan visszavonja a felt?ltést?',
    dictRemoveFile: 'Kép t?rlése',
    dictMaxFilesExceeded: 'Elérte a maximálisan felt?lthet? képek számát!'

};

$(document).on("click", ".primary", function() {
    $(".dz-success.dz-complete.main .primary").text("Legyen ez a f? kép")
    $(this).text("F? kép")
    $(".dz-success.dz-complete").removeClass("main")
    $(this).closest(".dz-success.dz-complete").addClass("main")
    $("#mainimage").val($(this).closest(".dz-success.dz-complete").find(".dz-filename span").text())


})

I think this init function ruins it, because if I delete it, the button works fine but the data doesn't go to the database

init: function() {
        dzClosure = this; // Makes sure that 'this' is understood inside the functions below.

        // for Dropzone to process the queue (instead of default form behavior):
        document.getElementById("sendButton").addEventListener("click", function(e) {
            // Make sure that the form isn't actually being sent.
            e.preventDefault();
            e.stopPropagation();
            dzClosure.processQueue();
        });

        //send all the form data along with the files:
        this.on("sendingmultiple", function(data, xhr, formData) {
            $(":input[name]", $("form")).each(function() {
                formData.append(this.name, $(':input[name=' + this.name + ']', $("form")).val());
            });
        });
    }

question from:https://stackoverflow.com/questions/65897982/cant-implement-dropzone-js-to-an-existing-form

Answer 1

I had to add 'done' to the accept function:

accept: function(file, done) {
.
.
 done();
}