Как создать один запрос при отправке нескольких форм с помощью общей кнопки «Отправить»

Question

У меня есть форма, которая включает в себя 2 раздела dropzone и текстовые поля от и одну кнопку submti на форме кнопки submbit, но я создаю три запроса, 2 файла dropzoen и одну форму текстовых полей формы, но мне нужны все эти данные в одном запросе. Итак, как мы можем передать несколько форм в одном запросе массива

Ниже мой JS Код

 <script>
    Dropzone.autoDiscover = false;
    var file_after;
    var fileList = new Array;
    var i = 0;

    // Dropzone class:
    var myDropzone = new Dropzone("div#mydropzone", {

        {{--url: "{{route('dropzone-files')}}",--}}
        url: "{{route('case-submit')}}",
        acceptedFiles: '.stl',
        addRemoveLinks: true,
        autoProcessQueue: false,
        uploadMultiple: true,
        paramName: "file_before",
        params: {
            _token: "{{csrf_token()}}"
        },
    });

    var fileafterdropzone = new Dropzone("div#fileafterdropzone", {
        {{--url: "{{route('dropzone-files')}}",--}}
        url: "{{route('case-submit')}}",
        acceptedFiles: '.stl',
        addRemoveLinks: true,
        parallelUploads: 10,
        uploadMultiple: true,
        paramName: "file_after",
        autoProcessQueue: false,
        params: {
            _token: "{{csrf_token()}}"
        },
    });

</script>

  <script>
     $(document).ready(function (e) {
        // Submit form data via Ajax
        $("#case-form").on('submit', function (e) {

            fileafterdropzone.processQueue();
            myDropzone.processQueue();

            e.preventDefault();
            var formData = new FormData(this);

            $.ajax({
                type: 'POST',
                url: '{{route('case-submit')}}',
                // data: new FormData(this),
                dataType: 'json',
                data: formData,
                contentType: false,
                cache: false,
                processData: false,
                success: function (response) {

                    var files_before = Dropzone.forElement("div#mydropzone");
                    files_before.removeAllFiles();
                    var fiels_after = Dropzone.forElement("div#fileafterdropzone");
                    fiels_after.removeAllFiles();

                    $.notify("Case Registered Successfully", "success");

                },
                error: function (xhr, json, errorThrown) {

                    var response = JSON.parse(xhr.responseText);

                    $.each(response.errors, function (key, value) {

                        $("#" + key + "_error").text(value[0]);
                        var element = document.getElementById(key + "_error");
                        element.classList.add('fa', 'fa-times-circle-o');
                        $("#" + key + "_error").css("color", "red");

                        $.notify(" There might be a problem case not registered", "error");
                    });
                }
            });
        });
    });
</script>

Answer 1

Каждая дропзона имеет свой собственный почтовый запрос, обозначенный атрибутом url при создании дропзоны, и будет хотеть отправить запрос для каждого файла.

Я бы предложил создать новый метод хранения ваших файлов (например, в модели File). Затем вы могли бы вернуть $file->id обратно во внешний интерфейс, используя обратный вызов успешного завершения dropzone и добавить эти идентификаторы файлов в форму.

Затем на submit форма будет иметь все идентификаторы файлов, чтобы вы могли связать их с бэкэндом.