spatie / medialibrary.pro

The source code of medialibrary.pro
https://medialibrary.pro
36 stars 9 forks source link

Attachment component not rendering HTML #43

Closed jorisvanandel closed 2 years ago

jorisvanandel commented 2 years ago

Hi, I've installed everything according to the docs (Livewire included) and added the component to my blade form as follows:

<x-media-library-attachment name="image"/>

However, the component is invisible/not rendering properly in the file. The generated HTML looks as follows:

<div class="col-md-12">
        <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">....</svg>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.min.js" defer=""></script>
    <script>
        function querySelectorAllArray(selector) {
            return Array.prototype.slice.call(
                document.querySelectorAll(selector), 0
            );
        }

        document.addEventListener('DOMContentLoaded', function () {
            dragula(querySelectorAllArray('.media-library-dragula-container'), {
                moves(el, source, handle) {
                    // Only allow dragging with the drag handle
                    if (!handle) {
                        return false;
                    }

                    return Boolean(handle.closest('.dragula-handle'));
                },
                accepts(el, target, source, sibling) {
                    // Only allow sorting in the same container
                    if (target !== source) {
                        return false;
                    }

                    return true;
                }
            }).on('drop', (el, target, source) => {
                source.querySelectorAll('[data-order]').forEach((el, i) => el.value = i);

                const collectionName = source.getAttribute('data-media-library-component-name');

                const event = new CustomEvent(`media-library-sorted-${collectionName}`);

                document.dispatchEvent(event);
            });
        }, false);
    </script>
<livewire:media-library :key="'media-library-component' . $name" :media="$media" :name="$name" :rules="$rules" :multiple="$multiple" :maxitems="$determineMaxItems()" :view="$componentView ?? null" :sortable="false" :listview="$determineListViewName()" :itemview="$determineItemViewName()" :propertiesview="$propertiesView ?? null" :editablename="$editableName">
                        </livewire:media-library></div>

I have no errors in the console or anywhere else. These are my installed dependencies.

{
    "name": "laravel/laravel",
    "type": "project",
    "description": "The Laravel Framework.",
    "keywords": [
        "framework",
        "laravel"
    ],
    "license": "MIT",
    "require": {
        "php": "^8.0",
        "fideloper/proxy": "^4.2",
        "fruitcake/laravel-cors": "^2.0",
        "guzzlehttp/guzzle": "^7.0.1",
        "laravel/fortify": "^1.6",
        "laravel/framework": "^8.0",
        "laravel/tinker": "^2.0",
        "league/flysystem-aws-s3-v3": "^1.0",
        "livewire/livewire": "^2.7",
        "spatie/laravel-honeypot": "^3.0",
        "spatie/laravel-medialibrary": "^9.0.0",
        "spatie/laravel-medialibrary-pro": "^1.0.0",
        "symfony/http-kernel": "^5.0",
        "illuminate/support": "^7.0|^8.0",
        "illuminate/database": "^7.0|^8.0",
        "illuminate/validation": "^7.0|^8.0"
    },
    "require-dev": {
        "facade/ignition": "^2.3.6",
        "fzaninotto/faker": "^1.9.1",
        "mockery/mockery": "^1.3.1",
        "nunomaduro/collision": "^5.0",
        "phpunit/phpunit": "^9.3"
    },
    "config": {
        "optimize-autoloader": true,
        "preferred-install": "dist",
        "sort-packages": true
    },
    "extra": {
        "laravel": {
            "providers": [
                "Livewire\\LivewireServiceProvider"
            ],
            "aliases": {
                "Livewire": "Livewire\\Livewire"
            }
        }
    },
    "autoload": {
        "psr-4": {
            "App\\": "app/",
            "Database\\Factories\\": "database/factories/",
            "Database\\Seeders\\": "database/seeders/",
            "Livewire\\": "src/"
        }
    },
    "autoload-dev": {
        "psr-4": {
            "Tests\\": "tests/"
        }
    },
    "minimum-stability": "dev",
    "prefer-stable": true,
    "scripts": {
        "post-autoload-dump": [
            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover --ansi",
            "@php artisan vendor:publish --force --tag=livewire:assets --ansi"
        ],
        "post-root-package-install": [
            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
        ],
        "post-create-project-cmd": [
            "@php artisan key:generate --ansi"
        ]
    },
    "repositories": [
        {
            "type": "composer",
            "url": "https://satis.spatie.be"
        }
    ]
}
jorisvanandel commented 2 years ago

Fixed by running php artisan view:clear. Issue can be closed.