Как использовать php for loop для создания экземпляров FilePond и использовать плагины - PullRequest
0 голосов
/ 01 мая 2019

Я хочу использовать цикл php for для создания некоторых файловых входов с помощью FilePond.

Каждый экземпляр должен иметь свой уникальный URL-адрес и использовать инициируемые плагины. У меня есть работающие загрузки файлов, хотя плагины, похоже, не используются.

<?php
foreach ($objArray as $value) {
    $inputNumber2++;
?>
    <input name="input_<?= $inputNumber2; ?>_images[]" id="input_<?= $inputNumber2; ?>_images" class="filepond" type="files" multiple />
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            window['input<?= $inputNumber2; ?>Images'] = FilePond.create(
                document.querySelector('#input_<?= $inputNumber2; ?>_images'),
                {
                    server: {
                        url: '<?= Config::get('URL'); ?>',
                        process: 'upload/images/input_<?= $inputNumber2; ?>_images',
                        revert: 'upload/revert',
                        load: 'files/',
                    },
                    <?php 
                    if (isset($value->imageArray) && count($value->imageArray) > 0) {
                        echo 'files: [';
                        foreach ($value->imageArray as $imageName) {
                            echo '{
                                source: "'.$imageName.'",
                                options: {
                                    type: "local",
                                    file: {
                                        name: "'.$imageName.'",
                                        type: "image/jpeg"
                                    }
                                }
                            },';
                        }
                        echo '],';
                    }
                    ?>
                }
            );
        });
    </script>
<?php } ?>
...
<script>
document.addEventListener('DOMContentLoaded', function() {
    FilePond.registerPlugin(
        FilePondPluginFileValidateType,
        FilePondPluginImageExifOrientation,
        FilePondPluginImagePreview,
        FilePondPluginImageTransform,
        FilePondPluginImageCrop,
        FilePondPluginImageResize
    );
    FilePond.setOptions({
        acceptedFileTypes: ['image/*'],
        labelIdle: 'Add images or <span class="filepond--label-action"> Browse </span>',
        imagePreviewMaxHeight: 100,
        imagePreviewZoomFactor: 1,

    });
});
</script>

Я, вероятно, делаю это неправильно - как я должен это делать?

Кроме того, он выбирает и использует собственную метку, поэтому некоторые настройки он получает.

1 Ответ

0 голосов
/ 01 мая 2019

Эта строка:

document.querySelector('#input_<?= $inputNumber2; ?>_images')

Возвращает поле с id input_<?= $inputNumber2; ?>_images. Но вы только присвоили атрибут name своему полю ввода. Я подозреваю, что добавление атрибута id к входу решит проблему.

ИЛИ вы можете изменить селектор на:

document.querySelector('input[name="input_<?= $inputNumber2; ?>_images"]')
...