Как получить массив файлов в dropzone и отправить за пределы dropzone

Question

Я пытаюсь интегрировать Dropzone в мою существующую форму. Я использую метод, который создает дропзоны программно. Причина, по которой я это делаю, заключается в том, что моя форма довольно длинная (я сократил ее для этого вопроса). Каждый раз, когда я пытался добавить class="dropzone" к элементу формы, вся форма становилась точкой отбрасывания, что не имело смысла. Поэтому я вложил в форму dropzone.

Мне трудно разобраться, как заставить файл работать так или альтернативным способом. До реализации dropzone я использовал традиционный метод ввода / ввода. Так работает вся моя система загрузки файлов. Если я не могу использовать метод ввода, мне нужно выяснить, как получить значения имени файла в формате массива, а затем отправить с помощью функции отправки.

Это то, что я надеюсь сохранитьфайлы в при использовании dropzone.

<input type="file" name="uploadedFile[]" class="inputfile" id="uploadedFileTest" multiple>

Если нет, то мне нужно структурировать файлы в массив.

Я попробовал этот подход внутри dropzoneфункция:

this.on("addedfile", function(file) {
    /*var allFiles = this.getAcceptedFiles();
    console.log(allFiles);*/
    dragFileName = file.name;
    var dragFileSize = file.size;
    console.log('File added - ' + file.name + ' - Size - ' + file.size);
    console.log(dragFileName)
});

Есть две проблемы с этой стратегией. 1. Имена файлов выводятся по одному за раз и не объединяются. 2. Всякий раз, когда я пытаюсь вызвать dragFileName вне функции dropzone, ничего не отображается.

В конечном итоге, когда я отправляю форму, мне нужны файлы и имена файлов для отправки через:

function submit(){
    var form = document.getElementById("salesforce_submit");
    var formData = new FormData(form);

Кто-нибудь видит, как я могу это сделать?

Полный код:

<form action="<?php echo $config['sf_url']; ?>" method="POST" id="salesforce_submit">
    <div><input id="first_name" placeholder="First Name*" name="first_name" type="text"></div>
    <div class="dropzone dz-clickable" id="myDropzone">
        <div class="dz-default dz-message">Drop files here or click to upload</div>
        <input type="file" name="uploadedFile[]" class="inputfile" id="uploadedFileTest" multiple>
    </div>
    <button type="submit" class="bigButtonLink bigButton" id="submit-all">
                SEND
    </button>
</form>

Javascript

Dropzone.autoDiscover = false;
$(document).ready(function() {

    //File Upload
    var fileName = '';
    var inputs = document.querySelectorAll('.inputfile');
    Array.prototype.forEach.call(inputs, function (input) {

        input.addEventListener('change', function (e) {

            if (this.files[0].size >= 65000000) {
                alert("This file is too large to upload. Contact Support for alternate ways to get this to us.");
                return false;
            }

            if (this.files && this.files.length > 1)
                fileName = (this.getAttribute('data-multiple-caption') || '').replace('{count}', this.files.length);
            else
                fileName = e.target.value.split('\\').pop();
        });
    });
//here
    var dragFileName = '';

    $('#myDropzone').dropzone ({
    //Dropzone.options.myDropzone= {
        url: 'php/quoteSendTest.php',
        autoProcessQueue: false,
        uploadMultiple: true,
        parallelUploads: 5,
        maxFiles: 5,
        maxFilesize: 1,
        acceptedFiles: 'image/*',
        addRemoveLinks: true,
        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("submit-all").addEventListener("click", function(e) {
                // Make sure that the form isn't actually being sent.
                console.log("Something should be showing for eventListener");
                //e.preventDefault();
                e.stopPropagation();
                dzClosure.processQueue();
            });

            this.on("addedfile", function(file) {
                /* Maybe display some more file information on your page */

                /*var allFiles = this.getAcceptedFiles();
            console.log(allFiles);*/
            dragFileName = file.name;
            var dragFileSize = file.size;
            console.log('File added - ' + file.name + ' - Size - ' + file.size);
            });

            //send all the form data along with the files:
            this.on("sendingmultiple", function(data, xhr, formData) {
                formData.append("firstname", jQuery("#firstname").val());
                formData.append("lastname", jQuery("#lastname").val());
            });
            console.log(dragFileName);
        }
    });

//here

    var send = false;

    $('#salesforce_submit').validate({
        ignore: [],
        rules: {
            first_name: {
                required: true,
                minlength: 2
            }
        },
        messages: {
            first_name: {
                required: "Please enter your first name",
                minlength: "Your first name seems a bit short, doesn't it?"
            }
        },
        submitHandler: function() {
                    submit();
        },
        errorPlacement: function (error, element) {
            if ($(element).attr('name') == 'interestHidden') {
            error.insertBefore(element.parent('div'));
            } else {
                error.insertAfter(element); // <- default
            }
        },

    });

    //File Upload Check Val
    var fileNameVal = '';

    $('#uploadedFileTest').change(function () {
        fileNameVal = $('#uploadedFileTest').val();
        console.log(fileNameVal);
    });

    function submit(){
        var form = document.getElementById("salesforce_submit");
        var formData = new FormData(form);

        $.ajax({
            url: '/php/quoteSendTest.php',
            type: 'POST',
            data: formData,
            success: function (data) {
                var obj = JSON.parse(data);
                // alert(obj);
                if(obj.status_code == 200) {
                        HTMLFormElement.prototype.submit.call(form)
                } else {
                    $('#salesforce_submit')[0].reset();
                }
                if(obj.status_code == 500) {
                    alert(obj.message);
                }
            },
            cache: false,
            contentType: false,
            processData: false
        });
    }