Dropzone в laravel foreach Blade не работает

У меня есть цикл foreach продукта товары в корзине могут получить много фотографий от пользователя пользователи загружают фото в продукт (продают фото фермы) модальное находится в цикле foreach

когда модальное окно открыто, dropzone не работает и появляется эта ошибка:

dropzone.js:1 Uncaught Error: Dropzone уже подключен.

Мой модальный

<div class = "modal fade"  id = "productmultiplephoto-{{$product->pivot->id}}" role = "dialog" aria-labelledby = "productmultiplephoto" aria-hidden = "true">
<div class = "modal-dialog modal-lg">
    <div class = "modal-content">
        <div class = "modal-header pb-0">
            <h5 class = "modal-title" id = "price-changes-modal-label"></h5>
            <button type = "button" class = "close" data-dismiss = "modal"
                    aria-label = "Close">
                <span aria-hidden = "true">&times;</span>
            </button>
        </div>
        <div class = "modal-body">

               <div class = "__img">
                   <div class = "form-group">
                       <input type = "hidden" name = "original_name[]" id = "product-photo">
                       <input name = "product_id"  value = "{{$product->id}}" type = "hidden"  id = "product_id" >
                       <input name = "product_pivot"  value = "{{$product->pivot->id}}" type = "hidden"  id = "product_pivot" >
                       <input name = "cartproduct_id"   type = "hidden"  id = "cartproduct_id"value = "{{$product->pivot->id}}" >

                       <label for = "photog">upload</label>
                       <input type = "hidden" name = "original_name[]" id = "product-photo">
                       <div id = "photog" class = "dropzone" ></div>
                   </div>
               </div>

        </div>
    </div>
</div>

Мой сценарий

 <script>
    Dropzone.autoDiscover = false;

    var photosGallery = []
    var drop = new Dropzone('#photog', {
        addRemoveLinks: true,
        url: "{{ route('front.photouser.upload') }}",
        type:"POST",

        sending: function(file, xhr, formData){
            formData.append("_token","{{csrf_token()}}")
            formData.append("product_id", document.getElementById('product_id').value);
            formData.append("product_pivot", document.getElementById('product_pivot').value);
            formData.append("cartproduct_id", document.getElementById('cartproduct_id').value);
        },
        success: function(file, response){
            photosGallery.push(response.original_name)
            if (response['level'] == 1) {
                $('.level1_message').html(response['message']);

            }
        }
    });
    productGallery = function(){
        document.getElementById('product-photo').value = photosGallery
    }

</script>

Моя модальная кнопка

@foreach($cart->products as $product)
     <button  type = "button" data-toggle = "modal" data-target = "#productmultiplephoto-{{$product->pivot->id}}" class = "btn-primary-multiple btn-primary-cm btn-with-icon">
    <i class = "mdi mdi-plus-box-multiple"></i>
        upload
    </button>
   @endforeach

Включить модальную часть

@include('front::products.partials.add-multiple-photo')

«modal находится в цикле foreach». Это делает ваш код недействительным, атрибуты id должны быть уникальными.

brombeer 10.01.2023 12:44
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
84
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Обновите свой div следующим образом:

<div class = "photog dropzone"></div>

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

<input type = "hidden" name = "product_id_{{$product->pivot->id}}" id = "product_id" value = "{{$product->id}}">

Полный JS:

<script>
document.addEventListener("DOMContentLoaded", function() {
    var photosGallery = [];
    Dropzone.autoDiscover = false;
    var dropzones = [];



    let modals = document.querySelectorAll('.dropzone-modal');
    modals.forEach((modal, index) => {
        let photog = modal.querySelector('.photog');
        let drop = new Dropzone(photog, {
            addRemoveLinks: true,
            url: "{{ route('front.photouser.upload') }}",
            type: "POST",
            sending: function(file, xhr, formData) {
                formData.append("_token", "{{csrf_token()}}")
                let product_id = modal.querySelector(`input[name='product_id']`);
                let product_pivot = modal.querySelector(`input[name='product_pivot']`);
                let cartproduct_id = modal.querySelector(`input[name='cartproduct_id']`);
                formData.append("product_id", product_id.value);
                formData.append("product_pivot", product_pivot.value);
                formData.append("cartproduct_id", cartproduct_id.value);
            },
            success: function(file, response) {
                photosGallery.push(response.original_name)
                if (response['level'] == 1) {
                    $('.level1_message').html(response['message']);
                }
            }
        });
        dropzones.push(drop);
    });

    let modalButtons = document.querySelectorAll('.btn-primary-multiple');
    modalButtons.forEach((button, index) => {
        button.addEventListener("click", () => {
            dropzones[index].removeAllFiles();
        });
    });


    productGallery = function() {
        document.getElementById('product-photo').value = photosGallery
    }

});
</script>

Обновите свой модальный div следующим образом:

<div class = "modal fade dropzone-modal"  id = "productmultiplephoto-{{$product->pivot->id}}" role = "dialog" aria-labelledby = "productmultiplephoto" aria-hidden = "true">

Вы можете помочь мне обновить мой скрипт?

sara 10.01.2023 13:59

сделано, пожалуйста, проверьте обновленный комментарий

codenathan 10.01.2023 15:02

это просто работает для одного из модальных режимов, другие модальные окна получают эту ошибку: Uncaught Error: Dropzone уже подключен.

sara 10.01.2023 15:12

Снова обновленный ответ: вы инициализируете объект Dropzone только один раз, но каждая итерация цикла привязывается к одному и тому же экземпляру Dropzone, что приводит к ошибке «Dropzone уже подключена» при открытии второго модального окна.

codenathan 10.01.2023 15:17

не могли бы вы написать полный сценарий? я был немного сбит с толку

sara 10.01.2023 15:27

Uncaught SyntaxError: «кнопки» идентификатора уже объявлены

sara 10.01.2023 15:30

Я предполагаю, что вам нужен только javascript. Я обновил код внизу.

codenathan 10.01.2023 17:06

Большое спасибо, но я получаю ошибку буксировки. Uncaught SyntaxError: Идентификатор 'modalButtons' уже объявлен (в корзине: 1003:13) cart: 931 Uncaught TypeError: Невозможно прочитать свойства undefined (чтение «removeAllFiles») в HTMLButtonElement.<anonymous> (корзина:931:34)

sara 11.01.2023 09:04

Обновлено снова для вас, пожалуйста, попробуйте js еще раз. Если не сбросить весь вывод HTML, который у вас есть, чтобы мы могли его правильно протестировать. Возможно, используйте кодепен

codenathan 11.01.2023 10:16

Неперехваченная ошибка: Dropzone уже подключен. в новом b (dropzone.js: 1: 2365) в корзине: 948: 24, а также forech работает нормально, и значение получает правильный идентификатор, но при загрузке фотографии получают значения в базе данных другого модального правильное значение не отправляется

sara 11.01.2023 11:16

Хорошо, обновил JS и посмотри в конце, чтобы обновить свой модальный класс с помощью класса «dropzone-modal».

codenathan 11.01.2023 12:24

Другие вопросы по теме