Problem:

• Files are uploaded in Dropzone but the tab does not move to the next one.
• No updates in the console or Laravel logs for debugging.

Desired Outcome:
From Dropzone, files are uploaded > Move to the next tab and route to the controller for further processing.

Issue:

• Files are uploaded in Dropzone but not moving to the next tab “Group”.
• Unable to validate if data is being transferred correctly from Dropzone to the next tab/route.
• No updates in console/Laravel logs to debug.

`<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
    <li class="nav-item" role="presentation">
        <a class="nav-link active" id="pills-Upload-tab" data-bs-toggle="pill" href="#pills-Upload-content" role="tab" aria-controls="pills-Upload-content" aria-selected="true">Upload</a>
    </li>
    <li class="nav-item" role="presentation">
        <a class="nav-link" id="pills-group-tab" data-bs-toggle="pill" href="#pills-group-content" role="tab" aria-controls="pills-group-content" aria-selected="false">Group</a>
    </li>
</ul>

<div class="tab-content">
    <div class="tab-pane fade show active" id="pills-Upload-content" role="tabpanel" aria-labelledby="pills-Upload-tab">
        <form action="{{ route('panel.asset-link.store.file') }}" method="POST" class="dropzone" id="my-awesome-dropzone">
            @csrf
            <div class="fallback">
                <input name="file" type="file" multiple />
            </div>
            <div class="col-12 d-flex justify-content-lg-end">
                <button id="submit-all" type="button" class="btn btn-primary mt-3">Upload & Next</button>
            </div>
        </form>
    </div>
    <div class="tab-pane fade" id="pills-group-content" role="tabpanel" aria-labelledby="pills-group-tab">
        <form action="{{ route('panel.asset-link.model.filename.preview') }}" method="POST" id="splitform">
            <div class="col-12 d-flex justify-content-between mb-3">
                <input type="hidden" class="vault_name" name="vault_name">
                <input type="hidden" id="fileData" name="fileData">
                <input type="hidden" name="ignore_files" id="form_ignored" value="1">
                <input type="hidden" id="workingType" name="workingType" value="irrelevant_filename">
                <div class="h6">Vault Name #<span class="vault_name"></span></div>
                <div class="h6">Auto Create Products - File Name Irrelevant</div>
                <div class="h6">Uploaded #<span id="totalUploaded">0</span> assets</div>
                <div class="h6">New Assets: #<span class="newassetcount">0</span></div>
            </div>
        </form>
        <div class="col-12 mb-3 d-flex justify-content-center">
            <button class="btn mx-2 btn-primary" form="splitform">Go 2 Review</button>
        </div>
    </div>
</div>

Here’s dropzone script.

<script>
    console.log('Script loaded');
    $(document).ready(function() {
        var uploadedFiles = []; // Declare outside the Dropzone initialization

        var myDropzone = new Dropzone("#my-awesome-dropzone", {
            autoProcessQueue: false,
            uploadMultiple: true,
            parallelUploads: 100,
            previewTemplate: '',

            init: function() {
                this.on("addedfile", function(file) {
                    if (this.files.length) {
                        var _i, _len;
                        for (_i = 0, _len = this.files.length; _i < _len - 1; _i++) {
                            if (this.files[_i].name === file.name && this.files[_i].size === file.size && this.files[_i].lastModified.toString() === file.lastModified.toString()) {
                                this.removeFile(file);
                                logToLaravel("Duplicate file detected and removed: " + file.name);
                                return;
                            }
                        }
                    }
                });

                $("#submit-all").on("click", function() {
                    logToLaravel("submit-all ID button clicked");

                    if ($("#vaultname").val() == "") {
                        $("#vaultname").focus();
                        $("#vaultname").css("border", "1px solid red");
                        return;
                    } else {
                        $("#vaultname").css("border", "none");
                    }

                    if (myDropzone.getFilesWithStatus(Dropzone.ADDED).length > 0) {
                        logToLaravel("Files in queue, processing...");
                        myDropzone.processQueue();
                    } else {
                        logToLaravel("No files to upload, switching tab directly...");
                        switchTab(uploadedFiles);
                    }
                });

                this.on("successmultiple", function(files, response) {
                    logToLaravel("Files uploaded successfully");
                    uploadedFiles = files.map(file => ({
                        FileName: file.name,
                        FilePath: file.dataURL // Adjust based on your response structure
                    }));
                    switchTab(uploadedFiles);
                });

                this.on("errormultiple", function(files, response) {
                    logToLaravel("Upload error: " + (response.message || "Error without message"));
                    files.forEach(file => {
                        this.removeFile(file);
                    });
                    updateCarousels();
                });

                this.on("queuecomplete", function() {
                    logToLaravel("Queue complete");
                });
            }
        });

        function switchTab(uploadedFiles) {
            $('#fileData').val(JSON.stringify(uploadedFiles));
            $('#totalUploaded').text(uploadedFiles.length);
            new bootstrap.Tab(document.querySelector('#pills-group-tab')).show();
            carryForwardData();
            logToLaravel("Switched to group tab with uploaded files");
        }

        function carryForwardData() {
            let vaultname = $("#vaultname").val();
            $(".vault_name").text(vaultname);
            $(".vault_name").val(vaultname);
            $("#uploadedFiles").val(JSON.stringify(uploadedFiles));
            console.log("Uploaded files data carried for further processing:", uploadedFiles);
            logToLaravel("Data carried forward to next tab");
        }

        function logToLaravel(message, context = {}) {
            console.log(message); // This is for debugging purposes in the browser console
            $.post("{{ route('panel.asset-link.log.to.laravel') }}", { 
                message: message, 
                context: context, 
                _token: "{{ csrf_token() }}" 
            }).fail(function(xhr, status, error) {
                console.error("Logging to Laravel failed:", status, error);
            });
        }
    });
</script>